将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实现随机返回数组的一个元素
Aug 13 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
js同源策略详解
May 21 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
vue的三种图片引入方式代码实例
Nov 19 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实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python3注册全局热键的实现
2020/03/22 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
.NET现在共支持多少种语言
2014/02/26 面试题
Delphi工程师笔试题
2013/09/21 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
主题实践活动总结
2014/05/08 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
小学体育组工作总结
2015/08/13 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
总结Python常用的魔法方法
2021/05/25 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
JavaScript 反射学习技巧
2021/10/16 Javascript
Docker下安装Oracle19c
2022/04/13 Servers