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：

当HTML编译器尝试处理指令时，会发生此错误指定指令定义中的require选项，但是当前DOM上不存在必需的指令控制器 element（或其祖先元素，如果指定了^）。

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，ng-model中没有input。

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

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

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

Angular ng-change无法在指令模板上运行

1 个答案: