如何將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