准备工作:

  (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-bootstrap的分页组件封装成一个指令的更多相关文章

  1. 如何将angular-ui的分页组件封装成一个指令

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...

  2. 如何将angular-ui的图片轮播组件封装成一个指令

    在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...

  3. 如何将angular-ui-bootstrap的图片轮播组件封装成一个指令

    在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...

  4. elementUI分页组件封装

    在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以 ...

  5. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  6. Primeng UI框架中 分页组件用法

    1.在当前模块或当前页面的对应的module.ts文件中引入相应组件模块,如:core.module.ts模块. import { PaginatorModule } from 'primeng/pr ...

  7. React后台管理系统- rc-pagination分页组件封装

    1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...

  8. 基于bootstrap的分页组件-Bootstrap Paginator

    效果

  9. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

随机推荐

  1. firefox与ie 的javascript区别

    1. Document.form.item 问题     现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 ...

  2. pxe自动安装

    首先我们要用到的linux的桌面模式,没有桌面模式的请自觉安装.注意要关闭防火墙 需要的支持环境,dhcp,tftp,vsftp. 1.先创建ftp的共享光盘目录 mkdir -p /var/ftp/ ...

  3. LeetCode OJ:Implement Queue using Stacks(栈实现队列)

    比较典型的一个题目,easy,不过可以有许多实现方式. 这里用的方式是每次pop完成之后再将stack2中的内容立即倒回stack1中.但是其他的实现也可以不是这样,可以是需要push的时候检查再,如 ...

  4. js jq 主动触发事件

    js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...

  5. 不能在具有唯一索引“IX_******”的对象“dbo.****”中插入重复键的行。重复键值为 (110, 372000, 2)。

    当尝试插入数据,或者更新某个表的时候出现 不能在具有唯一索引“IX_******”的对象“dbo.****”中插入重复键的行.重复键值为 (110, 372000, 2). 遇到这个问题的时候,请找到 ...

  6. Spring核心思想——IOC和DI

    基本概念 IOC是什么?     IOC(Inversion of Control)控制反转,IOC是一种新的Java编程模式,目前很多轻量级容器都在广泛使用的模式. IOC解决了什么问题?      ...

  7. selected多次点击不生效

    表单下拉选项使用selected设置选中时,发现第一次默认选中成功,在页面不刷新的情况下操作(比如ajax),虽然selected属性设置了,但是默认选中不生效. 解决办法1 可能是浏览器缓存问题,在 ...

  8. MB到片组的映射

    待分析 链接原文: http://blog.csdn.net/mr_phy/article/details/61638262

  9. c++下使用邮槽实现进程间通信

    Windows API提供了邮槽和命名管道两种机制来实现进程间通信,在这里使用C++实现邮槽. 邮槽是Windows提供的一种进程间单向通信的机制,进程中的一方只能读取(或写入)数据,而另一方只能写入 ...

  10. React状态管理之redux

    其实和vue对应的vuex都是差不多的东西,这里稍微提一下(安装Redux略过): import { createStore, combineReducers, applyMiddleware } f ...