Angular ng-change 在指令模板上不起作用

Question

我正在尝试使用 Angular 指令制作一个提示 ajax 搜索框。我仍在开始匹配数据，这是我所拥有的：

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"];
            }
        }
    }
}

问题是 ng-change 给我一个错误。使用 ng-click 或 ng-keypress 它可以完美运行，所以没有任何意义！有什么想法吗？

这是它抛出的错误：

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)

Answer 1

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 是 ng-change 所必需的，您的 input 中没有 ng-model。

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

将 ng-model 添加到您的 input，希望能解决您的问题。

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

Angular ng-change 在指令模板上不起作用

Angular ng-change not working on directive's template

javascript

angularjs

angularjs-ng-change