指令html模板
page.html
指令
app.directive('pagination', ['$http', '$q', function ($http, $q) { return { restrict: 'E', templateUrl: './modules/business/page.html', replace: true, scope: { list: '=', //列表数据 url: '@', //接口url method: '@', //get or post requestParam: '=', //请求参数 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
示例代码中, 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方法, 通知指令进行分页查询
