anglar改ページプラグインtm.paginationに対して二次トリガ問題の三種類の解決案

今日は個人ブログを開発する時、リストを改ページして操作します.全体的にはAnglarJsを使うので、改ページプラグインもAnglarJs pagination.jsを選択しました.しかし、デバッグの時に発見されたとても気持ちが悪いことはリストをロードする時にインターフェースが二回要求されました.個人サイトがこの倍の要求に耐えられないことを知ることができます.それから、長い資料の検索ルートを始めました.この二つの変数は同時に傍受する必要があると資料があります.

$scope.paginationConf.currentPage
$scope.paginationConf.itemsPerPage

2回ロードします.その場は暴走しています.変えたくないほど怠けています.仕方がないので、次のような変更があります.
第一の解決方法は、自分の解決方法でもあります.

//        
$scope.loadDataFirst = 1;
//       
$scope.paginationConf = {
    currentPage: 1,
    totalItems: 10,
    itemsPerPage: 10,
    perPageOptions: [10, 20, 30, 40, 50],
    onChange: function() {
        if($scope.loadDataFirst == 1) {
            $scope.reloadList(); //    
            $scope.loadDataFirst = 2;
        }else if($scope.loadDataFirst == 2) {
            $scope.loadDataFirst = 0;
        }else if ($scope.loadDataFirst == 0) {
            $scope.reloadList(); //    
        }
    }
};

考えを言います.2回読み込むなら、直感的には初期化変数です.

$scope.loadDataFirst = 1。

イベントを傍受して1かどうかを判断します.もしそうなら、最初のページのリストを読み込み、

$scope.loadDataFirst = 2；

そうでないと次の判断に進み、2であれば、1回目のリストが既に読み込まれていることを示し、2回目のロードに入ります.この時はデータをロードしないと、

$scope.loadDataFirst = 0；

最後に0かどうかを判断します.はい、データをロードして、パラメータのページをロードするプラグインが設定されます.
 なぜ最後の判断がありますか?

は直接elseではなく、柔軟性のために、最小範囲

に影響を与える.

は、各ページのデータを切り替える際に、ここを待ち受けているので、ロードが終了したら、直接実行できるリスト更新

を残しておく必要があります.
第二の解決方法は、ネットで探しているオーディエンスの霊感もここから来ています.ちょっと改善しただけです.

$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.conf = {
    //    
    total : 1190,
    //    
    currentPage : 1,
    //        
    itemPageLimit : 1,
    //            
    isSelectPage : false,
    //         
    isLinkPage : false
}
//        ，        
$scope.$watch('conf.currentPage + conf.itemPageLimit' , function(news){
    //    http      
    console.log($scope.conf.currentPage , $scope.conf.itemPageLimit);
});

技術の道はいつまでも続いています.まっすぐ行けばいいです.