本文主要包含学习Angularjs分页指令等相关知识,希望在学习及工作中可以帮助到您
在项目中许多页面都用到了分页，然后每个页面都有许多重复的分页代码，于是自己写了一份简易的分页指令，简化页面的代码，且容易维护，写在博客中当做备份，方便以后查阅。
以下是定义指令及其应用的步骤：
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 class="pagination-main">\n'+
' <li class="prev-page" ng-class="{disabled:pageData.currentPage==1}" title="首页">\n'+
' <a href="javascript:void(0);" ng-click="on_loadPage(1)"><span class="fa fa-fast-backward"></span></a>\n'+
' </li>\n'+
' <li class="prev-page" ng-class="{disabled:pageData.currentPage==1 }">\n'+
' <a href="javascript:void(0);" ng-click="on_prev()" title="上一页"><span class="fa fa-step-backward"></span></a>\n'+
' </li>\n'+
' <li class="data-page" 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 class="next-page" ng-class="{disabled:pageData.currentPage==pageData.totalPage}">\n'+
' <a href="javascript:void(0);" ng-click="on_next()" title="下一页"><span class="fa fa-step-forward"></span></a>\n'+
' </li>\n'+
' <li class="skip-page"><div><input type="text" placeholder="" ng-model="inpage">\n'+
' <input type="button" value="跳转" ng-click="on_loadPage(inpage)"></div>\n'+
' </li>\n'+
' <li class="data-num"><a class="cursor-text" 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);
</div>
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;
}
</div>
3.分页查询方法
我在factory中自定义了分页查询的方法，共用，方便代码的维护。在angular中与后台的交互默认是异步的，我这里写成同步查询了，首先定义js文件pageSync.service.js，以下是factory的全部内容：
'use strict';
angular.module('app').factory('PageSync', ['$http', '$q', function Page($http, $q) {
var rowCollectionPage = [];
var totalPage = 1;
var pages = [];
var endPage = 1;
var load = function(url, currentPage, pageSize,deferred) {
var json = {rowCollectionPage: [], totalPage: 1, currentPage:currentPage ? currentPage:1, pages: []};
$http.get(url).success(function(rows) {
rowCollectionPage = setPageRow(rows.list, pageSize);
// 获取总页数
totalPage = Math.ceil(rows.count / pageSize);
endPage = totalPage;
// 生成数字链接
if (totalPage <= 7) {
pages = getPagesLow(totalPage);
} else {
pages = getPagesHigh(currentPage, totalPage);
}
json.rowCollectionPage = rowCollectionPage;
json.totalPage = totalPage==0 ? 1 : totalPage;
json.currentPage = currentPage;
json.pages = pages;
json.count = rows.count;
json.pageSize = pageSize;
/**
* 自定义字段，初始化的时候为before，只要经过该分页方法，则字段值变为after
* before表示未经过该分页方法，after表示经过该分页方法，
* 前台页面加载的规则：为before时表示表格无数据，为after且pataData.count==0时无数据，否则视为有数据，
* 也可以说是记录的一个时间状态（访问数据前及返回数据后）
*/
json.loadTime = 'after';
deferred.resolve(json);
});
return deferred.promise;
};
// 总页数小于等于7时 显示所有的页数
var getPagesLow = function(totalPage) {
var temp = [];
for (var i=1; i<totalPage+1; i++) {
temp.push(i);
}
return temp;
};
// 总页数大于7时 根据当前页获取7个页码数
var getPagesHigh = function(currentPage, totalPage) {
var temp = [];