在项目中许多页面都用到了分页，然后每个页面都有许多重复的分页代码，于是自己写了一份简易的分页指令，简化页面的代码，且容易维护，写在博客中当做备份，方便以后查阅。
以下是定义指令及其应用的步骤：
1.指令定义
定义一个js文件，page-directive.js，用来写分页的指令代码，这个文件中包含了分页的模板，以下是js文件中的所有代码：
'use strict'; (function () { angular.module('template/pageInit/pageInit.html', []).run([ '$templateCache',function($templateCache) { $templateCache.put('template/pageInit/pageInit.html', '<ul>\n'+ ' <li ng-class="{disabled:pageData.currentPage==1}" title="首页">\n'+ ' <a href="javascript:void(0);" ng-click="on_loadPage(1)"><span></span></a>\n'+ ' </li>\n'+ ' <li ng-class="{disabled:pageData.currentPage==1 }">\n'+ ' <a href="javascript:void(0);" ng-click="on_prev()" title="上一页"><span></span></a>\n'+ ' </li>\n'+ ' <li ng-repeat="page in pageData.pages" ng-class="{\'first-page\': page==1, \'last-page\': page==pageData.totalPage}">\n'+ ' <a ng-if="page!=\'...\'" href="javascript:void(0);" ng-class="{\'bg-custom\': page==pageData.currentPage}" ng-click="on_loadPage(page, tabData)">{{ page }}</a>\n'+ ' <a ng-if="page==\'...\'" href="javascript:void(0);" ng-class="{\'bg-custom\': page==pageData.currentPage}" ng-click="">{{ page }}</a>\n'+ ' </li>\n'+ ' <li ng-class="{disabled:pageData.currentPage==pageData.totalPage}">\n'+ ' <a href="javascript:void(0);" ng-click="on_next()" title="下一页"><span></span></a>\n'+ ' </li>\n'+ ' <li><div><input type="text" placeholder="" ng-model="inpage">\n'+ ' <input type="button" value="跳转" ng-click="on_loadPage(inpage)"></div>\n'+ ' </li>\n'+ ' <li><a href="#"><span>共{{pageData.count}}条</span></a></li>\n'+ '</ul>\n'+ '' ); } ]); angular.module('pageInit', ['template/pageInit/pageInit.html']) .directive('pageInit',['pageinitTemplate', function(pageinitTemplate) { return { restrict : 'AE', templateUrl: function (tElement, tAttrs) { return tAttrs.templateUrl || pageinitTemplate.getPath(); }, replace : true, scope : { pageData : '=', prev : '&', next : '&', loadPage : '&' }, link : function(scope, element, attrs) { scope.on_prev = function() { if(scope.prev) { scope.prev(); } }; scope.on_next = function() { if(scope.next) { scope.next(); } }; scope.on_loadPage = function(page) { scope.inpage = undefined; if(scope.loadPage) { scope.loadPage({page: page}); } }; } }; }]) .provider('pageinitTemplate', function () { var templatePath = 'template/pageInit/pageInit.html'; this.setPath = function (path) { templatePath = path; }; this.$get = function () { return { getPath: function () { return templatePath; } }; }; }); }).call(window);
2.分页样式控制
建议写在单独的.css文件中，首先新建pageSync.css文件，以下是具体样式
.pagination-main { display: inline-block; padding-left: 0; margin: 0 0; border-radius: 4px; vertical-align: middle; } .pagination-main li.prev-page > a { border: 0; } .pagination-main li.next-page > a { border: 0; border-left: 1px; margin-left: 0; } .pagination-main li.first-page > a { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pagination-main li.last-page > a { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pagination-main li div { width: 80px;border: 1px solid #DDDDDD;background-color: #ffffff;float: left;padding: 0; } .pagination-main li.skip-page input[type='text'] { width: 24px;height: 20px;border: 0;text-align: center; } .pagination-main li.skip-page input[type='button'] { padding: 0 4px 1px 10px;border: 0;border-left: 1px solid #dddddd;background-color: #ffffff } .pagination-main li.data-num > a { border: 0; margin-left: 0; } .pagination-main > li { display: inline; } .pagination-main > li:first-child > a, .pagination-main > li:first-child > span { /*margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px;*/ } .pagination-main > .active > a, .pagination-main > .active > span, .pagination-main > .active > a:hover, .pagination-main > .active > span:hover, .pagination-main > .active > a:focus, .pagination-main > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; } .pagination-main > li > a, .pagination-main > li > span { position: relative; float: left; /*padding: 6px 12px;*/ padding: 1px 8px; margin-left: -1px; line-height: 1.42857143; color: #428bca; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination-main > .disabled > span, .pagination-main > .disabled > span:hover, .pagination-main > .disabled > span:focus, .pagination-main > .disabled > a, .pagination-main > .disabled > a:hover, .pagination-main > .disabled > a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd; }