1

ここでフィドル：http://jsfiddle.net/graphicsxp/QA4Fa/2/

検索用のディレクティブを作成しようとしています。基本的には、ユーザー入力を検出するテキスト ボックスにすぎず、1 秒後に検索メソッドが呼び出されます。

まだ機能しておらず、2 つの問題があります。

まず、ユーザーがテキストを入力したときに、スパンで filterCriteria が更新されないのはなぜですか?

第 2 に、filterCriteria の監視はページの読み込み時にトリガーされますが、テキスト ボックスにテキストが入力されたときにはトリガーされません。

<div ng-app="myApp" ng-controller="myController">   
  <delayed-search ng-model="filterCriteria"></delayed-search>
   <span>filter criteria is : {{filterCriteria}}</span>
</div>

angular.module('myApp', []).directive("delayedSearch", ['$timeout', function($timeout) {
return {
    restrict: "E",
    template: '<input type="text"  />',
    scope: {
        filterCriteria : '='
    },
    link: function (scope, element, attrs) {

    },
    controller: function ($scope) {
        var timer = false;
        $scope.$watch('filterCriteria', function () {
            if (timer) {
                $timeout.cancel(timer);
            }
            timer = $timeout(function () {
                alert('timeout expired');
            }, 1000)
        });
    }
}
}]).controller('myController', function($scope){  });
4

2 に答える 2

2

まず、ユーザーがテキストを入力したときに、スパンで filterCriteria が更新されないのはなぜですか?

あなたのスコープは間違っていscope: { ngModel : '=' },ますtemplate: '<input type="text" ng-model="ngModel" />。

第 2 に、filterCriteria の監視はページの読み込み時にトリガーされますが、テキスト ボックスにテキストが入力されたときにはトリガーされません。

最初の問題と同じように、 を見ているは​​ずngModelです。

また、これにはコントローラーのオーバーヘッドは必要ありません。リンク機能を使用するだけで済みます。更新されたフィドルは次のとおりです。http://jsfiddle.net/QA4Fa/3/

于 2013-04-23T14:50:08.797 に答える