CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-change
Vandervals
Vandervals

Reputation: 6064

Angular ng-change not working on directive's template

I'm trying to make a hinting ajax search box with an Angular directive. I'm still begining to match data and here is what I have:

function hintSearch () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="search_hint"><label><input type="search" ng-change="query()"></label><ul class="results"><li class="hint" ng-repeat="hint in hints | limitTo: 8" ng-bind="hint" ng-click="hint_selected(hint)"></li></ul></div>',
        scope: {},
        link: function(scope, element, attrs){
            scope.hints = ["client1", "client2"];
            scope.hint_selected = function(){
                console.log("hint selected");
            }
            scope.query = function(){
                console.log("query php");
            scope.hints = ["client1", "client2", "client3"];
            }
        }
    }
}

The problem is that the ng-change gives me an error. With ng-click or ng-keypress it works perfectly so it makes no sense! Any ideas?

This is the error it throws:

angular.js:13550 Error: [$compile:ctreq] http://errors.angularjs.org/1.5.5/$compile/ctreq?p0=ngModel&p1=ngChange
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
    at gb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:71:251)
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:66:67)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:305)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:322)
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:65:473)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:305)
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:65:473)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:305)

Upvotes: 1

Views: 2310

Answers (1)

Khalid Hussain
Khalid Hussain

Reputation: 1694

From error page:

This error occurs when HTML compiler tries to process a directive that specifies the require option in a directive definition, but the required directive controller is not present on the current DOM element (or its ancestor element, if ^ was specified).

This is the source code of ng-change.

var ngChangeDirective = valueFn({
  restrict: 'A',
  require: 'ngModel',
  link: function(scope, element, attr, ctrl) {
    ctrl.$viewChangeListeners.push(function() {
      scope.$eval(attr.ngChange);
    });
  }
});

ng-model is required for ng-change, there is no ng-model in your input.

<input type="search" ng-change="query()">

Add ng-model to your input, hope that will solve your problem.

<input type="search" ng-model='myModel' ng-change="query()">

Upvotes: 5

Related Questions