指令html模板

page.html

<div><div class="pull-left pagination-detail"><span class="pagination-info">显示第 {{(conf.currentPage-1) * conf.pageSize + 1}} 到第 {{conf.currentPage == conf.totalPage ? conf.total : conf.currentPage * conf.pageSize }} 条记录 , 总共 {{conf.total}} 条记录</span><span class="page-list">, 每页显示<span class="btn-group dropup"><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="page-size">{{conf.pageSize}}</span><span class="caret"></span></button><ul class="dropdown-menu page-size-select" role="menu"><li ng-repeat="n in conf.pageSizeList" ng-click="changePageSize(n)"><a ng-bind="n"></a></li></ul></span>条记录</span></div><ul class="pagination pull-right pagination-nav" ng-show="conf.totalPage>1"><li ng-class="{true:'active'}[conf.currentPage==1]"><a ng-click="loadPage(1)">«</a></li><li ng-class="{true:'disabled'}[conf.currentPage==1]"><a ng-click="prev()"> ‹ </a></li><li ng-class="{true:'active'}[conf.currentPage==page]" ng-repeat="page in conf.pages"><a ng-click="loadPage(page)" ng-bind="page"></a></li><li ng-class="{true:'disabled'}[conf.currentPage==conf.totalPage]"><a ng-click="next()"> › </a></li><li ng-class="{true:'active'}[conf.currentPage==conf.totalPage]"><a ng-click="loadPage(conf.totalPage)"> » </a></li></ul></div>

指令

app.directive('pagination', ['$http', '$q', function ($http, $q) {return {restrict: 'E',templateUrl: './modules/business/page.html',replace: true,scope: {list: '=', //列表数据url: '@', //接口urlmethod: '@', //get or postrequestParam: '=', //请求参数requestData: '=', //请求对象数据event: '@' //事件名, 外部调用分页查询的事件},link: function (scope, element) {//监听事件scope.$on(scope.event, function (event, data) {console.log(scope.event, data);scope.loadData();});//ajax服务var AjaxService = {get: function (url, params) {var defered = $q.defer();$http({method: 'GET',url: url,params: params}).success(function (data) {defered.resolve(data);}).error(function (err) {defered.reject(err);});return defered.promise;},post: function (url, params, data) {var defered = $q.defer();$http({method: 'POST',url: url,params: params,data: data}).success(function (data) {defered.resolve(data);}).error(function (err) {defered.reject(err);});return defered.promise;}};//配置参数scope.conf = {currentPage: 1,totalPage: 1,endPage: 1,pageSize: 15,pages: [],total: 0,pageSizeList: [10, 15, 20, 25, 30, 35, 40, 45, 50]};//加载数据scope.loadData = function () {scope.requestParam = scope.requestParam instanceof Object && scope.requestParam || {};scope.requestData = scope.requestData instanceof Object && scope.requestData || {};scope.requestParam.page = scope.conf.currentPage;scope.requestParam.pageSize = scope.conf.pageSize;var promise = null;if (scope.method == 'GET') promise = AjaxService.get(scope.url, scope.requestParam);else if (scope.method == 'POST') promise = AjaxService.post(scope.url, scope.requestParam, scope.requestData);promise.then(function (resp) {if (resp && resp.code == 0) {if (resp.result && resp.result instanceof Array) scope.list = resp.result;else scope.list = [];if (resp.total && typeof(resp.total) == 'number') scope.conf.total = resp.total;else scope.conf.total = 0;}scope.calcPages();});};//改变页大小scope.changePageSize = function (n) {scope.conf.pageSize = n;scope.conf.currentPage = 1;scope.loadData();};//下一页scope.next = function () {if (scope.conf.currentPage < scope.conf.totalPage) {scope.conf.currentPage++;scope.loadData();}};//上一页scope.prev = function () {if (scope.conf.currentPage > 1) {scope.conf.currentPage--;scope.loadData();}};//加载指定页scope.loadPage = function (page) {if (scope.conf.currentPage != page) {scope.conf.currentPage = page;scope.loadData();}};//查询scope.query = function () {scope.conf.currentPage = 1;scope.loadData();};//计算页数scope.calcPages = function () {//计算总页数scope.conf.totalPage = Math.ceil(scope.conf.total / scope.conf.pageSize);//生成快捷页码if (scope.conf.currentPage > 1 && scope.conf.currentPage < scope.conf.totalPage) {scope.conf.pages = [scope.conf.currentPage - 1,scope.conf.currentPage,scope.conf.currentPage + 1];} else if (scope.conf.currentPage == 1 && scope.conf.totalPage > 1) {scope.conf.pages = [scope.conf.currentPage,scope.conf.currentPage + 1];} else if (scope.conf.currentPage == scope.conf.totalPage && scope.conf.totalPage > 1) {scope.conf.pages = [scope.conf.currentPage - 1,scope.conf.currentPage];}};//指令加载完后立即查询scope.query();}};}]);

为了代码集中一点, 我把ajaxservice定义在了内部. 
指令基本包含分页所需功能,且不需修改, 下次就可以直接引用.

应用

index.html

<pagination list="businesses" url="/business/select" event="event-pagination-query-bp" method="POST"request-param="requestParam"request-data="requestData"></pagination>

示例代码中, list参数是双向绑定的列表数据, businesses就是页面table绑定的ng-repeat循环的列表集合, url是后台接口, event是事件名, method是接口方法,GET or POST, request-param就是请求参数,request-data就是请求体.

controller.js

//分页请求参数$scope.requestParam = {};//分页请求对象(模糊查询时,对象属性可以为列表数据的字段)$scope.requestData = {};/*** 广播通知分页指令*/$scope.query = function () {$scope.$broadcast('event-pagination-query-bp', 'query');};

当新增数据或者更新数据后, 可以调用controller里的query方法, 通知指令进行分页查询

页面效果