我一直在使用 jQuery/AngularJS 指令来消除 Firebase 支持的应用程序中的输入。它来自 Lars Gersmann 的帖子,效果很好:
http://orangevolt.blogspot.com.au/2013/08/debounced-throttled-model-updates-for.html
从 Angular 1.0.8 更新到 1.2 似乎有问题。每次触发指令时,$._data 函数不会从元素中提取事件,而是返回一个未定义的值,从而导致此错误:
TypeError: Object.keys 在 Function.keys (native) 上调用非对象
这里定义:
var map = $._data( element[0], 'events'),
events = $.each( Object.keys( map), function( index, eventName) {
// map is undefined :(
...
}
AngularJS 或什至 jQuery 是否发生了某些变化,不会像以前那样提取此元素的事件?
(旁注,我使用的是 jQuery 版本 1.8.3,它在 Angular 升级中没有改变)。
感谢任何可以阐明这一点的人!
最佳答案
您可以通过使用解除绑定(bind)、绑定(bind)和 Angular $timeout
方法来访问这些事件,从而创建一个更简单的去抖动脚本。这是基于 this post关于阻止 ngChange
事件。
这是一个重写的 debounce 指令,似乎在 Angular 1.2 中有效。它取消绑定(bind)输入,然后在 1000 毫秒延迟后使用 $setViewValue
应用更改。我还添加了对模糊的即时更改。使这篇文章优于原始帖子的关键是设置优先级。
angular.module('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;
elm.unbind('input');
var debounce;
elm.bind('input', function() {
$timeout.cancel(debounce);
debounce = $timeout( function() {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
}, 1000);
});
elm.bind('blur', function() {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
});
}
}
});
关于angularjs - ng-ampere-debounce 似乎在 AngularJS 1.2 中停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20045975/