将angular-ui的分页组件封装成指令的方法详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了将angular-ui的分页组件封装成指令的方法详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3814字，纯文字阅读大概需要6分钟。
内容图文
准备工作：
（1）一如既往的我还是使用了requireJS进行js代码的编译
（2）必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....
首先抛出几个问题：
a）:何时回用到分页 (当后端返回的数据过多，一页装不满时，我们必须要采取分页的效果，给用户良好的视觉效果)
b）:分页一般要传递哪些数据 （总的数据数量，每页固定显示多少条数据，当点击分页时候返回当前的页码.......这三条是必须的）
第一步：先完成指令的封装
我会在 js/directives/pagedir 此文件下完成指令的编写
pagedir.html(指令页面模板)
<div>
<button class="btn btn-info" type="button" ng-click="setPage(3)">Set current page to: 3</button>
<h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
<uib-pagination class="pagination-sm" 分页函数="" ng-change="pageChanged()" 是否将当前页显示在中间="" rotate="true" 是否显示首页，和末页的数字="" boundary-link-numbers="true" 是否显示“.....”这几个点="" force-ellipses="true" 显示页码的页码tabs数量（不包含首页，末页）="" max-size="maxSize" 当前页="" ng-model="bigCurrentPage" 每页显示的数据条数="" ="" items-per-page="pageSize" 总的数据记录数="" total-items="bigTotalItems" =""> </uib-pagination>
<pre>Page: {{bigCurrentPage}}/{{numPages}}</pre>
</div>
pagedir.js（指令的操作js）
define(['app'],function(myapp){
myapp.directive("pagedir",[function(){
return{
templateUrl:"js/directives/pagedir/pagedir.html",//指令的模板页面
restrict:'AE',
scope:{
data:'=', //用于获取页面控制器传回来的数据（例如：总得记录数，每页显示的数量等....）
currentpage:'=', //返回当前页给页面控制器
},
link:function(s,el,attrs){
},
controller:['$scope','$log',function($scope,$log){
$scope.bigTotalItems=$scope.data.bigTotalItems;
$scope.pageSize=$scope.data.pageSize;
$scope.bigCurrentPage=$scope.data.bigCurrentPage;
$scope.numPages=$scope.data.numPages;
$scope.maxSize=$scope.data.maxSize;
$scope.setPage = function (pageNo) {//用于设置回到指定页
$scope.bigCurrentPage = pageNo;
console.log( $scope.bigCurrentPage);
};
$scope.pageChanged = function() {//用于返回当前页
$log.log('Page changed to: ' + $scope.bigCurrentPage);
console.log($scope.bigCurrentPage);
$scope.currentpage=$scope.bigCurrentPage;//赋值，准备传给页面控制器，用于接口的取值
};
}],
}
}]);
});
第二步：明确使用地方
我打算在test.html页面上使用分页的功能（你可以在各个有多条数据现实的页面使用分页）
test.html
<p>this is page dir</p> <pagedir ng-click="getCurPage()" currentpage="currentpage" data="dataPage"> </pagedir>
对应的控制器：idea_test_ctrl
define(['app','directives/pagedir/pagedir'],function(myapp){
myapp.controller("idea_test_ctrl",['$scope',function($scope){
$scope.dataPage={ //用于分页的数据
maxSize:5, //显示五个页码按钮（不包括第一条，和最后一条）
bigTotalItems:50, //总的记录数（一般来源于接口的返回数据）
bigCurrentPage:1, //当前页码
pageSize:5, //每页显示的数据数量
numPages:50/5, //共有多少页
};
$scope.getCurPage=function(){
console.log($scope.currentpage,"========================================");
//接下来的调用后台接口，返回数据
//...........................一系列的后续操作
}
}]);
});
最终页面的显示效果
顺便给出路由的配置
.state('home.ideas.test', {
url: '/test',
views: {
"part": {
templateUrl: 'tpls/ideas/test.html',
controller:"idea_test_ctrl"
}
}
})
总结一下：封装此指令的难点(假如你已经了解怎么使用angualr的指令了)
1>：如何双向传值的问题（在页面控制器设置的数值传递到分页模块控制器，以及每次点击分页怎么样将页码传回页面控制器用于调用接口的传参）
一点分享：link链接方法与指令的controller有啥关系（貌似都可以进行数据的操作） 指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用.link函数可以将指令互相隔离开来，而controller则定义可复用的行为。 （指令是可以嵌套的，还记得我们指令中有一个require的属性吗？）
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
内容总结
以上是互联网集市为您收集整理的将angular-ui的分页组件封装成指令的方法详解全部内容，希望文章能够帮你解决将angular-ui的分页组件封装成指令的方法详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。