将angular-ui的分页组件封装成指令的方法详解
准备工作:
(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,"========================================"); //接下来的调用后台接口,返回数据 //...........................一系列的后续操作 } }]); });
最终页面的显示效果
顺便给出路由的配置
.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的属性吗?)
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- React第三方组件3(状态管理之Flux的使用②TodoList上)
- ggplot2玫瑰图案例——星巴克门店分布图
- React第三方组件3(状态管理之Flux的使用①简单使用)
- 用ggplot2画了一个我也叫不上名的炫酷图表
- React技巧8(不再手动绑定this,跟.bind(this)说88)
- 美美的商务范儿——ggplot2蝴蝶图
- 机器学习(三)使用Python和R语言从头开始理解和编写神经网络介绍目录神经网络背后的直观知识多层感知器及其基础知识什么是激活函数?前向传播,反向传播和训练次数(epochs)多层感知器全批量梯度下降
- React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)
- 左右用R右手Python9——字符串合并与拆分
- hdu 1003 Max Sum(最大子窜和)
- React第三方组件2(状态管理之Refast的使用④中间件middleware使用)
- 高维分面应用——ggplot2分面气泡图饼图
- poj 1579 Function Run Fun
- React第三方组件2(状态管理之Refast的使用③扩展ctx)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript 技术篇-JSON字符串在线快速格式化查看实例演示,json.cn网址格式化json字符串
- Python 技术篇-含中文编码的代码运行方法,(unicode error) ‘utf-8‘ codec can‘t decode问题原因及解决方法
- Spring Boot Actuators
- 用图机器学习探索 A 股个股相关性变化
- Python 技术篇-连接oracle数据库并执行sql语句实例演示,python连接oracle数据库oci详细配置方法
- MySQL 技术篇-mysql数据库的安装、配置与使用实例演示
- JavaScript 技术篇-js代码获取当前操作系统信息、浏览器版本信息实例演示,windows NT版本对照表
- Oracle 数据库impdp导入数据库版本和dmp数据库文件版本不匹配问题解决方法,ORA-39142版本号不兼容、ORA-39000转储文件说明错误解决方法
- 实践总结:基于Kbone使用React同构开发小程序
- BAT 批处理命令 - 实现输出当前文件夹下的所有文件夹名的功能实例演示
- Python+Selenium 自动化-指定chrome驱动运行selenium实例演示,运行指定位置下的浏览器驱动
- Linux 命令查找指定文件夹下符合查询条件的文件和文件夹实例演示
- 用Python实现一个最新QQ办公版(TIM)的登录界面
- Oracle 数据库直接执行本地sql文件、sql脚本实例演示
- Oracle 数据库利用回收站恢复删除的表实例演示