将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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 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
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
JS重要知识点小结
2011/11/06 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
wxPython中文教程入门实例
2014/06/09 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python实现的彩票机选器实例
2015/06/17 Python
python爬取微信公众号文章
2018/08/31 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
学生党支部先进事迹
2014/02/04 职场文书
学生个人自我鉴定
2014/03/26 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
降价通知函
2015/04/23 职场文书
公司人力资源管理制度
2015/08/05 职场文书
初中团支书竞选稿
2015/11/21 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server