如何将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 type="button" class="btn btn-info" 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"
total-items="bigTotalItems"//总的数据记录数
items-per-page="pageSize" //每页显示的数据条数
ng-model="bigCurrentPage"//当前页
max-size="maxSize" //显示页码的页码tabs数量(不包含首页,末页)
force-ellipses="true" //是否显示“.....”这几个点
boundary-link-numbers="true"//是否显示首页,和末页的数字
rotate="true" //是否将当前页显示在中间
ng-change="pageChanged()" //分页函数
>
</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 data="dataPage" currentpage="currentpage" ng-click="getCurPage()"> </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的属性吗?)
参考:http://blog.csdn.net/baidu_24024601/article/details/52710331
如何将angular-ui的分页组件封装成一个指令的更多相关文章
- 如何将angular-ui-bootstrap的分页组件封装成一个指令
准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...
- 如何将angular-ui的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
- 如何将angular-ui-bootstrap的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
- elementUI分页组件封装
在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以 ...
- React后台管理系统- rc-pagination分页组件封装
1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- vue element-ui 分页组件封装
<template> <el-pagination @size-change="handleSizeChange" @current-change="h ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
随机推荐
- iOS开发之延时执行
方法1: performSelector(SEL) withObjects:(id) afterDelay:(NSTimeInterval); 方法2: dispatch_after(dispatch ...
- webpack引入handlebars报错'You must pass a string or Handlebars AST to Handlebars.compile'
背景: webpack作为一个部分替代打包工具和模块化工具的优秀选择出现,作为尝试,也为了构建自己习惯的前端开发方式,我尝试了将webpack和自己常用handlebars模板引擎结合.整体项目背景为 ...
- js面向对象-原型链
var Person = function (name) { this.name = name; } Person.prototype.say = function () { console.log( ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(二)
一步步打造一个简单的 MVC 电商网站 - BooksStore(二) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 前: ...
- IOS开发创建开发证书及发布App应用(八)——使用Application Loader工具上传应用
8.使用Application Loader工具上传应用 继续第七步在iTunes所创建的应用,打开应用,如下图 点击详情按钮进去之后,单击右上角Ready to Upload Binary按钮,如下 ...
- [SinGuLaRiTy] 树形存储结构阶段性测试
[SinGuLaRiTy-1011] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. G2019级信息奥赛专项训练 题目 程序名 时间 内存 ...
- WSDL/WebService/SOAP/REST/AXIS/CXF 开放式服务
WebService是一种数据交换标准.通过WebService标准,你可以把项目中的方法作为接口提供给其他项目使用. 有时候我们习惯性地将具体提供服务的某个方法称为WebService.比如图书系统 ...
- servlet学习总结(一)——初识Servlet
Servlet工作过程 当客户端向web服务器发送servlet请求时,web服务器首先检查是否已经加载并创建了servlet实例对象.如果没有会装载并创建该Servlet的一个实例对象.然后调用se ...
- java中GUI的awt和Swing的知识点
刚刚学习了java的GUI,写了几个程序,基本熟悉了awt和Swing,下面和大家分享一下知识点 1.JFrame的层次结构 参考:http://tieba.baidu.com/p/200421612 ...
- 爬楼梯问题-斐波那契序列的应用.md
N 阶楼梯,一次可以爬1.2.3...n步,求爬楼梯的种类数 /** * 斐波那契序列 */ public class ClimbingStairs { // Sol 1: 递归 // 递归 公式:F ...