将angular-ui的分页组件封装成指令的方法详解


Posted in Javascript onMay 10, 2017

准备工作:

(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,"========================================");

   //接下来的调用后台接口,返回数据

   //...........................一系列的后续操作

  }

 }]);

}); 

最终页面的显示效果

将angular-ui的分页组件封装成指令的方法详解

顺便给出路由的配置

.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的属性吗?)

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
Vue实现验证码功能
Dec 03 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
vue-axios使用详解
May 10 #Javascript
详解axios在vue中的简单配置与使用
May 10 #Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JavaScript实现form表单的多文件上传
Mar 27 #Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 #Javascript
利用PM2部署node.js项目的方法教程
May 10 #Javascript
全面解析vue中的数据双向绑定
May 10 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python感知机实现代码
2019/01/18 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
会计专业应届生自荐信
2014/02/07 职场文书
学校体育节班级口号
2015/12/25 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js