ディレクティブのテンプレート上で角度変化が働いていません

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のコンパイラが ディレクティブの定義で必要とオプションを指定しているディレクティブを処理しようとすると発生しますが、現在のDOM 要素（または^が指定されていればその祖先要素）には、必要な指令コントローラが存在しません。

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()"> 

、あなたのinputにあなたの問題を解決する希望をng-modelを追加します。