将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判断undefined类型的正确方法
Jun 30 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
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基础学习笔记
2007/03/18 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python 读写文件的操作代码
2018/09/20 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python 使用shutil复制图片的例子
2019/12/13 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
追悼会子女答谢词
2014/01/28 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
赔偿协议书
2015/01/27 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript