准备工作:

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

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

    准备工作: (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. React后台管理系统- rc-pagination分页组件封装

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

  6. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

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

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

  8. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  9. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

随机推荐

  1. Android Studio开发遇到程序崩溃问题

    在用Android Studio开发过程中,经常遇到程序本身没有错误,但运行起来却总是挂掉,具体有如下几个解决方案: 1.将运行在真机上的app卸载,重新运行安装 2.在Build选项中有一个clea ...

  2. Java完成简单猜数字游戏v2.0

    猜数字游戏v2.0 优化了获取随机数.输入数据超出边界值的代码,并增加了异常处理,能够在玩家输入错误数据错误时给出可靠指引,希望对和我一样的新人有帮助, 最后希望有大神愿意帮我解决代码优化的问题,谢谢 ...

  3. java学习笔记 --- 继承

    继承 (1)定义:把多个类中相同的成员给提取出来定义到一个独立的类中.然后让这多个类和该独立的类产生一个关系,    这多个类就具备了这些内容.这个关系叫继承.  (2)Java中如何表示继承呢?格式 ...

  4. vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用(接入了聊天机器人,能够进行正常对话)

    使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...

  5. 自定义template

    今天写代码写的有点烦了,感觉天天写new String(); new HashMap<String,String>()等,感觉写烦了,有没有快速的方法了.就你输入syso然后按atl+/就 ...

  6. Unity 3D Framework Designing(4)——设计可复用的SubView和SubViewModel(Part 2)

    在我们设计和开发应用程序时,经常要用到控件.比如开发一个客户端WinForm应用程序时,微软就为我们提供了若干控件,这些控件为我们提供了可被定制的属性和事件.属性可以更改它的外观,比如背景色,标题等, ...

  7. python之字符串

    字符串与文本操作 字符串: Python 2和Python 3最大的差别就在于字符串 Python 2中字符串是byte的有序序列 Python 3中字符串是unicode的有序序列 字符串是不可变的 ...

  8. 搞定:Enter passphrase for key提示

    使用ssh-genkey生成公用key,但是自己使用时会多次提示,Enter passphrase for key,这儿给出如何解决. 在${HOME}/.bashrc中增加如下代码: alias a ...

  9. App forensics

    A friend of mine claimed that someone stole her personal data via hacking certain App. She installed ...

  10. Opencv4android的Android Studio项目配置及实例下载

    因为软件竞赛的项目会用到Opencv fo rAndroid,所以就研究了一下如何在Android Studio上配置Opencv4Android 环境概述: Android Studio 2.3 O ...