詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案
今天在學習angularjs的分頁插件時遇到了一個前端的問題,谷歌瀏覽器開發(fā)者模式調(diào)試的時候發(fā)現(xiàn)每次點擊分頁刷新按鈕會觸發(fā)兩次后臺請求,ajax向后臺發(fā)送了兩次請求,這對于強迫癥患者來說是一個比較惡心和感到不舒服的事情。
于是在網(wǎng)上也找到了靠譜的解決方案:http://jqvue.com/tm.pagination/ ,且在此維護者的這個版本中解決了此問題,同時注意 angularjs版本的配合使用。但是不滿足于現(xiàn)狀,我還是找到了自己的解決方案,不打針不吃藥,就這么簡單!粗暴!It's time to show the code!!
var app = angular.module("shopping", [ 'pagination' ]);
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();//重新加載 這個方法會重復(fù)調(diào)用兩次
$scope.reload = false;
setTimeout(function() {
$scope.reload = true;
}, 200);
}
};
//分頁
$scope.findPage = function(page, rows) {
$http.get(
'../goods/findAll?pageNum=' + page + '&pageSize='
+ rows).success(function(response) {
$scope.list = response.rows;
$scope.paginationConf.totalItems = response.total; //更新總記錄數(shù)
});
}
});
核心代碼我已經(jīng)用黑色字體加粗標識出來了,定義一個全局變量reload存于$scope上,第二次觸發(fā)加載reload的時候就發(fā)現(xiàn)這個全局變量為false狀態(tài),則直接return。之后再用定時器setTimeout在200毫秒之后將其歸位。下一次刷新不會受影響且每次刷新只會發(fā)送一次ajax,提升請求質(zhì)量與用戶體驗。
注:此方法不僅限于實現(xiàn)ajax的請求重復(fù)發(fā)送問題,其他類似的重復(fù)行為可參考本實例的實現(xiàn)思想,注意全局變量的合理使用,減少內(nèi)存浪費問題。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
angularJs使用$watch和$filter過濾器制作搜索篩選實例
本篇文章主要介紹了angularJs使用$watch和$filter過濾器制作搜索篩選實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
angular2實現(xiàn)統(tǒng)一的http請求頭方法
今天小編就為大家分享一篇angular2實現(xiàn)統(tǒng)一的http請求頭方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Angular.js中上傳指令ng-upload的基本使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js中上傳指令ng-upload的基本使用方法,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07
AngularJS中controller控制器繼承的使用方法
這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
spring+angular實現(xiàn)導(dǎo)出excel的實現(xiàn)代碼
這篇文章主要介紹了spring+angular實現(xiàn)導(dǎo)出excel的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02

