angularjs - 滞search指令

小提琴这里需要帮助：http://jsfiddle.net/graphicsxp/QA4Fa/2/angularjs - 滞search指令

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

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

首先，为什么在用户输入文本时跨度中的filterCriteria未更新？其次，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){ });

来源

2013-04-23 Sam

作为一种替代方法，来看看这个答案，它提供了一个指令，可以让你穿上ngChange延迟：http://stackoverflow.com/questions/21121460/angular-directive-包封-A-延迟换NG-变化/ 21420441＃21420441。使用ngChange以1的ngDelay调用搜索方法。 – Doug 2014-01-29 03:46:07

首先，为什么是filterCriteria不是在跨度，当用户输入文本更新？

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

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

与第一个问题相同，您应该看ngModel。

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

来源

2013-04-23 14:50:08 Langdon

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

在指令的控制器是为指令，指令通信（我希望他们别的命名它的东西！）。

@Langdon正确..但这里是另一个相同的实现。请注意，在答案的两个控制器中都没有。

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

来源

2013-04-23 15:00:24 ganaraj

不错的一个！并感谢您的建议，这是非常有用的（我仍然在学习角）。兰登的回答虽然是他第一次回复，但我仍将其作为回答。感谢您的帮助。 – Sam 2013-04-23 15:06:22

angularjs - 滞search指令

回答

相关问题