angularjs - ng-ampere-debounce 似乎在 AngularJS 1.2 中停止工作

Question

我一直在使用 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 升级中没有改变)。

感谢任何可以阐明这一点的人!

Answer 1

您可以通过使用解除绑定(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());
            });
        });
    }

}
});

加上 JSFiddle Demo