我可以使用_lodash在AngularJS中消除或限制观看的<input>?

我有以下哪个在绑定到$ scope.id的<input>字段上进行监视。 每次input字段值改变时,watch函数被执行:

 $scope.$watch("id", function (id) { // code that does something based on $scope.id }); 

有没有一种方法,我可以把这个超时或去杠杆_lodash这样的代码不会执行每个按键,而用户正在改变的价值。

我想要的是延迟一秒,以便在用户停止键入一秒钟之后,手表内的代码块就会运行。 请注意,input值是随时可能改变的。 例如,如果值为“1”或“10”或“1000”,则需要调用该函数。 这类似于带有build议的search框在Google中的工作方式。 如果用户input999,那么我需要调用该函数。 如果他删除了9,所以它是99,那么我需要调用该函数。

我有_lodash可用,所以使用这个解决scheme可能是最适合我的需求。

那是你在找什么?

 $scope.$watch("id", _.debounce(function (id) { // Code that does something based on $scope.id // This code will be invoked after 1 second from the last time 'id' has changed. }, 1000)); 

但是请注意,如果你想在这个函数中改变$ scope,你应该把它包装到$scope.$apply(...) ,除非_.debounce函数在内部使用$timeout (据我所知,做)Angular将不会意识到你在$scope上所做的更改。

UPDATE

至于更新的问题 – 是的,你需要包装整个callback函数体

$scope.$apply()

 $scope.$watch("id", _.debounce(function (id) { // This code will be invoked after 1 second from the last time 'id' has changed. $scope.$apply(function(){ // Code that does something based on $scope.id }) }, 1000)); 

您可以在Angular 1.3.0中使用ngModelOptions

HTML:

 <div ng-controller="Ctrl"> <form name="userForm"> Name: <input type="text" name="userName" ng-model="user.name" ng-model-options="{ debounce: 1000 }" /> <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br /> </form> <pre>user.name = <span ng-bind="user.name"></span></pre> </div> 

更多信息: https : //docs.angularjs.org/api/ng/directive/ngModelOptions

我知道这个问题要求提供一个lodash解决scheme。 无论如何,这里只是一个有angular度的解决方

 app.factory('debounce', function($timeout) { return function(callback, interval) { var timeout = null; return function() { $timeout.cancel(timeout); var args = arguments; timeout = $timeout(function () { callback.apply(this, args); }, interval); }; }; }); 

在控制器中:

 app.controller('BlaCtrl', function(debounce) { $scope.$watch("id", debounce(function (id) { .... }, 1000)); }); 

你可以把它封装在一个指令中。 来源: https : //gist.github.com/tommaitland/7579618

 <input type="text" ng-model="id" ng-debounce="1000"> 

使用Javascript

 app.directive('ngDebounce', function ($timeout) { return { restrict: 'A', require: 'ngModel', priority: 99, link: function (scope, elm, attr, ngModelCtrl) { if (attr.type === 'radio' || attr.type === 'checkbox') { return; } var delay = parseInt(attr.ngDebounce, 10); if (isNaN(delay)) { delay = 1000; } elm.unbind('input'); var debounce; elm.bind('input', function () { $timeout.cancel(debounce); debounce = $timeout(function () { scope.$apply(function () { ngModelCtrl.$setViewValue(elm.val()); }); }, delay); }); elm.bind('blur', function () { scope.$apply(function () { ngModelCtrl.$setViewValue(elm.val()); }); }); } }; });