我可以使用_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()); }); }); } }; });
