angularjs - 需要延迟搜索指令的帮助答案

【问题标题】：angularjs - need help for delayed search directiveangularjs - 需要延迟搜索指令的帮助
【发布时间】：2013-04-23 14:46:05
【问题描述】：

在这里提琴：http://jsfiddle.net/graphicsxp/QA4Fa/2/

我正在尝试创建一个搜索指令。基本上它只是一个检测用户输入的文本框，并在 1 秒延迟后调用搜索方法。

它还没有工作，我有两个问题。

首先，为什么filterCriteria在用户输入文本时没有在span中更新？

其次，filterCriteria上的watch在页面加载时触发，而不是在文本框中输入文本时触发。

<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){  });

【问题讨论】：

作为替代方法，请查看此答案，它提供了一个指令，允许您延迟 ngChange：stackoverflow.com/questions/21121460/…。使用 ngChange 调用 ngDelay 为 1s 的搜索方法。

标签： angularjs angularjs-directive

【解决方案1】：

You should NOT use a controller with a directive ( until you understand it ! ) .

指令中的控制器用于指令与指令之间的通信（我希望他们已经将其命名为其他名称！）。

@Langdon 是对的。但这是另一个相同的实现。请注意，在两个答案中都缺少控制器。

http://jsfiddle.net/QA4Fa/4/

【讨论】：

不错的一个！并感谢您的建议，它非常有用（我仍在学习角度）。我会将兰登的回复标记为答案，尽管他是第一个回复的。感谢您的帮助。

【解决方案2】：

首先，为什么filterCriteria在用户输入文本时没有在span中更新？

你的范围错了，应该是scope: { ngModel : '=' },，你的模板应该是template: '<input type="text" ng-model="ngModel" />。

其次，filterCriteria上的watch在页面加载时触发，而不是在文本框中输入文本时触发。

和第一个问题一样，你应该看ngModel。

此外，您不需要控制器的开销，只需使用链接功能即可。这是一个更新的小提琴：http://jsfiddle.net/QA4Fa/3/

【讨论】：