将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+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 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
Zend引擎的发展 [15]
2006/10/09 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
小松树教学反思
2014/02/11 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
建筑工地标语
2014/06/18 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
合作协议书范本
2014/10/25 职场文书
生死抉择观后感
2015/06/09 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
Python实现老照片修复之上色小技巧
2021/10/16 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js