2

Firebase を利用したアプリで入力をデバウンスするために、jQuery / AngularJS ディレクティブを使用しています。これは 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 の非オブジェクトで呼び出されました (ネイティブ)

ここで定義されています：

 var map = $._data( element[0], 'events'),
 events = $.each( Object.keys( map), function( index, eventName) {
    // map is undefined :(
    ...
 }

以前のようにこの要素のイベントをプルしないように、AngularJS または jQuery で何か変更がありましたか?

(ちなみに、Angular のアップグレードで変更されていない jQuery バージョン 1.8.3 を使用しています)。

これに光を当てることができる人に感謝します！

4

1 に答える 1

7

代わりに、アンバインド、バインド、および Angular$timeoutメソッドを使用して、より単純なデバウンス スクリプトを作成することで、これらのイベントにアクセスできます。これは、ブロックイベントに関するこの投稿に基づいています。ngChange

これは、Angular 1.2 で動作するように見える書き直された debounce ディレクティブです。入力のバインドを解除し$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 に答える