4

クリック イベントでデバウンス機能を取得する必要があるサイトがあり、Web を検索して適切な解決策を見つけましたが、できませんでした。

私は 2 つのリンクを取得しました。各リンクは独自のタイプのデータを取得し、このデータは下のリストで使用されます。

<li ng-class="{'active' : type == 'own'}">
    <a ng-click="changeType('own')" href="#"><span aria-hidden="true" class="icon icon-user"></span> Mine arbejdsgrupper</a>
</li>
<li ng-class="{'active' : type == 'all'}">
    <a ng-click="changeType('all')" href="#"><span aria-hidden="true" class="icon icon-cabinet"></span> Foreslåede arbejsgrupper</a>
</li>

高速に切り替えた場合 (最初のリンクをクリックしてから 2 番目のリンクをクリック)、データを取得するための非同期フェッチが追従できないため、最初に 2 番目のリンクをクリックしても、リストの最初のリンクからコンテンツを取得します。

ng-model-options があることがわかりますが、ここでできるかどうかわかりません。アンダースコアのデバウンスを使用する必要がある場合は悲しいので、スコープへのすべての変更を $scope.$apply する必要があります。

誰かがこれについてアイデアを持っていますか？

編集！

友人がこれを送ってくれました。 AngularJS でデバウンス サービスを作成する方法 問題は解決するはずです。

4

1 に答える 1

2

あなたはこれについて間違ったレベルで考えています。経験則として、UI は主に関数呼び出しだけの非常に単純な対話のみを持つべきだと思います。つまり、UI の式とロジックを制限しようとします。

したがって、これらのメソッドがクリックされた後、コントローラーでデバウンスします。

angular.module('app-controlllers').controller('ACtrl', [
'$scope',
function ($scope) {
    var debounceAllFn = _.debouce(function () {
        // your actual function implementation
    }. 500),
    debounceOwnFn = _.debouce(function () {
        // your actual function implementation
    }. 500);

    $scope.changeType = function (type) {
        switch (type.toLowerCase()) {
            'all' : 
                debounceAllFn();
                break;
            'own' : 
                debounceOwnFn();
                break;
        }
    }
}
]);
于 2014-07-02T07:29:46.783 に答える