ホームページ > 記事 > ウェブフロントエンド > 角度ページングプラグイン tm.pagination の二次トリガーの問題を解決する方法

角度ページングプラグイン tm.pagination の二次トリガーの問題を解決する方法

不言オリジナル: 2018-07-14 16:16:501344ブラウズ

この記事では、主に angular ページングプラグイン tm.pagination の二次トリガーの問題を解決する方法を紹介します。これは、必要な友人に参照してもらえるように共有します。 angularjs のページングプラグインで、Google Chrome 開発者モードをデバッグしているときに、ページング更新ボタンをクリックするたびに、Ajax が 2 つのリクエストをバックグラウンドに送信することがわかりました。 . 強迫性障害の患者の場合の比較です。

そこで、インターネット上で信頼できる解決策も見つけました: http://jqvue.com/tm.pagination/。この問題はこのバージョンのメンテナーで解決されました。同時に、使用方法にも注意してください。 angularjs バージョンの。しかし現状に満足せず、注射や薬を使わずに自分なりの解決策を見つけました。とても簡単です。粗い！

コードを表示する時間です!!

var app = angular.module("shopping", [ &#39;pagination&#39; ]);
    app.controller("brandController",
            function($scope, $http) {
                $scope.reloadList = function() {
                    //切换页码  
                    $scope.findPage($scope.paginationConf.currentPage,
                            $scope.paginationConf.itemsPerPage);
                }
                $scope.reload = true;
                //分页控件配置 
                $scope.paginationConf = {
                    currentPage : 1,
                    totalItems : 10,
                    itemsPerPage : 10,
                    perPageOptions : [ 10, 20, 30, 40, 50 ],
                    onChange : function() {
                        if(!$scope.reload) {
                            return;
                        }
                        $scope.reloadList();//重新加载  这个方法会重复调用两次
                        $scope.reload = false;
                        setTimeout(function() {
                            $scope.reload = true;
                        }, 200);
                    }
                };
                //分页
                $scope.findPage = function(page, rows) {
                    
                    $http.get(
                            &#39;../goods/findAll?pageNum=&#39; + page + &#39;&pageSize=&#39;
                                    + rows).success(function(response) {
                        $scope.list = response.rows;
                        $scope.paginationConf.totalItems = response.total;　　//更新总记录数
                    });
                }
            });

グローバル変数 reload を定義し、$scope に保存したコアコードを、リロードがトリガーされたときに発見しました。 2 回目は、グローバル変数が false 状態の場合、直接戻ります。次に、タイマー setTimeout を使用して、200 ミリ秒後にリセットします。次の更新には影響せず、更新ごとに 1 つの ajax のみが送信されるため、リクエストの品質とユーザーエクスペリエンスが向上します。

注: この方法は、ajax リクエストの繰り返し送信の問題に限定されません。他の同様の繰り返し動作については、メモリの無駄を減らすためのグローバル変数の合理的な使用に注意してください。。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

角度ページングプラグイン tm.pagination の二次トリガーの問題を解決する方法

関連記事