针对angular分页插件tm.pagination二次触发问题三种解决方案

今天在开发个人博客的时候，需要对列表进行分页操作，因为整体使用的是AngularJs，所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情，在加载列表的时候接口被请求了两次，可要知道个人网站可经不起这成倍的请求。然后就开始了漫漫资料查询路，有资料说这两个变量需要同时监听$scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage，否则就会加载两次。当场就象暴走，懒得我还不想换，没办法所以就有了下面的更改。

第一种解决方式，也是自己的解决方式

//第一次加载标志位
$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(); //重新加载
		}
	}
};

说一下思路：既然它会加载两次，那么直观的来说，初始化变量 $scope.loadDataFirst = 1。进入监听事件判断是否为1，如果是的话加载第一页列表，将 $scope.loadDataFirst = 2；否则进入下一判断，判断如果为2，表示第一次列表已经加载，进入第二次加载，此时不加载数据，将 $scope.loadDataFirst = 0；最后去判断是否为零，是的话，加载数据，加载参数分页插件会设置。
 
为什么会有最后一个判断

1. 不是直接else，为了灵活性，将影响控制在最小范围
2. 在切换每页数据的时候，还会监听这里，所以必须预留一个加载结束后，可以直接执行的列表刷新

第二种解决方式，网上找的大佬的，灵感也是来自于此，只是稍作改进

$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);
});

技术之路永无止境，一直走就好