分页做得越来越多，每次都需要复制一大堆代码，很烦，觉着应该弄个分页指令封装下。不废话了，直接上代码。
JS部分
//指令部分 directives.directive('xlPage', [function () { return { replace: true, templateUrl: '/views/directive/xl-page.html', link: function (scope, ele, attrs) { scope.currentPage = 1;//当前页数 scope.count = 0;//总条数 scope.pageSize = attrs.size;//分页大小 scope.totalPage = 1;//总页数 scope.pages = [];//分页数组 if (!scope[attrs.method]) { throw new Error('load method is undefined'); } scope.next = function () { if (scope.currentPage < scope.totalPage) { scope.currentPage++; scope.getData(); } }; scope.prev = function () { if (scope.currentPage > 1) { scope.currentPage--; scope.getData(); } }; //调用 scope.getData = function (page) { page && (scope.currentPage = page); scope[attrs.method](scope.currentPage, scope.pageSize, function (data) { scope.totalPage = Math.ceil(data.count / scope.pageSize); if (scope.currentPage > 1 && scope.currentPage < scope.totalPage) { scope.pages = [ scope.currentPage - 1, scope.currentPage, scope.currentPage + 1 ]; } else if (scope.currentPage == 1 && scope.totalPage > 1) { scope.pages = [ scope.currentPage, scope.currentPage + 1 ]; } else if (scope.currentPage == scope.totalPage && scope.totalPage > 1) { scope.pages = [ scope.currentPage - 1, scope.currentPage ]; } scope.list = data.list; }); }; scope.getData(); } } }]); //控制器部分 controllers.controller('CourseListController', ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) { $scope.list = []; $scope.keyword = ''; $scope.load = function (page, size, callback) { $http.get($rootScope.api + '/course/list?keyword=' + $scope.keyword + '&page=' + page + '&size=' + size).success(function (data) { callback && callback(data); }); }; //JSON { "count": "2", "list": [ { "user_id": "12", "email": "admin@ddhigh.com", "nickname": "拖鞋", "avatar": "http://q.qlogo.cn/qqapp/101191761/0D040ED029959BB79FD1A0927FD48989/100", "sex": "1", "status": "1", "phone": "", "description": null, "created_at": "1427303955", "score": "0" }, { "user_id": "4", "email": "xxx@qq.com", "nickname": "111", "avatar": "", "sex": "1", "status": "1", "phone": "", "description": null, "created_at": "1426777188", "score": "0" } ] }
HTML部分
<!--指令调用代码--> <xl-page size="30" method="load"></xl-page> <!--指令模板[xl-page.html]--> <ul class="pagination" ng-show="totalPage>1"> <li ng-class="{true:'active'}[currentPage==1]"><a href="javascript:void(0)" ng-click="currentPage=1;getData()">首页</a></li> <li ng-class="{true:'disabled'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prev()">上一页</a></li> <li ng-repeat="page in pages" ng-class="{true:'active',false:''}[currentPage==page]"><a href="javascript:void(0);" ng-click="getData(page)">{{ page }}</a></li> <li ng-class="{true:'disabled'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="next()">下一页</a> </li> <li ng-class="{true:'active'}[currentPage==totalPage]"><a href="javascript:void(0)" ng-click="currentPage=totalPage;getData()">末页</a></li> </ul>
分页指令到这里就结束了，希望大家举一反三–。