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

准备工做：

　　（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