2

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

感谢任何可以对此有所了解的人！

4

1 回答 1

7

你可以通过使用 unbinds、binds 和 Angular$timeout方法来创建更简单的 debounce 脚本来访问这些事件。这是基于这篇关于阻塞ngChange事件的帖子。

这是一个重写的 debounce 指令，似乎在 Angular 1.2 中有效。$setViewValue它取消绑定输入，然后在 1000 毫秒延迟后应用更改。我还添加了对模糊的即时更改。使这项工作超越原始帖子的关键是设置优先级。

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 演示

于 2013-11-20T03:44:44.227 回答