將angular-ui的分頁組件封裝成指令的方法詳解

更新時(shí)間：2017年05月10日 11:01:55 作者：你的一燈

這篇文章主要給大家介紹了將angular-ui的分頁組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作覺有一定的參考價(jià)值，需要的朋友下面來一起看看吧。

準(zhǔn)備工作：

（1）一如既往的我還是使用了requireJS進(jìn)行js代碼的編譯

（2）必須引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....

首先拋出幾個(gè)問題：

a）:何時(shí)回用到分頁 (當(dāng)后端返回的數(shù)據(jù)過多，一頁裝不滿時(shí)，我們必須要采取分頁的效果，給用戶良好的視覺效果)

b）:分頁一般要傳遞哪些數(shù)據(jù) （總的數(shù)據(jù)數(shù)量，每頁固定顯示多少條數(shù)據(jù)，當(dāng)點(diǎn)擊分頁時(shí)候返回當(dāng)前的頁碼.......這三條是必須的）

第一步：先完成指令的封裝

我會(huì)在 js/directives/pagedir 此文件下完成指令的編寫

pagedir.html(指令頁面模板)

<div>

 <button class="btn btn-info" type="button" 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" 分頁函數(shù)="" ng-change="pageChanged()" 是否將當(dāng)前頁顯示在中間="" rotate="true" 是否顯示首頁，和末頁的數(shù)字="" boundary-link-numbers="true" 是否顯示“.....”這幾個(gè)點(diǎn)="" force-ellipses="true" 顯示頁碼的頁碼tabs數(shù)量（不包含首頁，末頁）="" max-size="maxSize" 當(dāng)前頁="" ng-model="bigCurrentPage" 每頁顯示的數(shù)據(jù)條數(shù)="" 　　　　="" items-per-page="pageSize" 總的數(shù)據(jù)記錄數(shù)="" total-items="bigTotalItems" 　　　　　=""> </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:'=',   //用于獲取頁面控制器傳回來的數(shù)據(jù)（例如：總得記錄數(shù)，每頁顯示的數(shù)量等....）

     currentpage:'=', //返回當(dāng)前頁給頁面控制器

    },

    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) {//用于設(shè)置回到指定頁

      $scope.bigCurrentPage = pageNo;

      console.log( $scope.bigCurrentPage);

     };

     $scope.pageChanged = function() {//用于返回當(dāng)前頁

      $log.log('Page changed to: ' + $scope.bigCurrentPage);

      console.log($scope.bigCurrentPage);

      $scope.currentpage=$scope.bigCurrentPage;//賦值，準(zhǔn)備傳給頁面控制器，用于接口的取值

     };

    }],

  }

 }]);

});

第二步：明確使用地方

我打算在test.html頁面上使用分頁的功能（你可以在各個(gè)有多條數(shù)據(jù)現(xiàn)實(shí)的頁面使用分頁）

test.html

<p>this is page dir</p>

<pagedir ng-click="getCurPage()" currentpage="currentpage" data="dataPage"> </pagedir>

對(duì)應(yīng)的控制器：idea_test_ctrl

define(['app','directives/pagedir/pagedir'],function(myapp){

 myapp.controller("idea_test_ctrl",['$scope',function($scope){

  $scope.dataPage={ //用于分頁的數(shù)據(jù)

   maxSize:5,     //顯示五個(gè)頁碼按鈕（不包括第一條，和最后一條）

   bigTotalItems:50,   //總的記錄數(shù)（一般來源于接口的返回?cái)?shù)據(jù)）

   bigCurrentPage:1,  //當(dāng)前頁碼

   pageSize:5,    //每頁顯示的數(shù)據(jù)數(shù)量

   numPages:50/5,   //共有多少頁

  };

  $scope.getCurPage=function(){

   console.log($scope.currentpage,"========================================");

   //接下來的調(diào)用后臺(tái)接口，返回?cái)?shù)據(jù)

   //...........................一系列的后續(xù)操作

  }

 }]);

});

最終頁面的顯示效果

順便給出路由的配置

.state('home.ideas.test', {

    url: '/test',

    views: {

     "part": {

      templateUrl: 'tpls/ideas/test.html',

      controller:"idea_test_ctrl"

     }

    }

 })

總結(jié)一下：封裝此指令的難點(diǎn)(假如你已經(jīng)了解怎么使用angualr的指令了)

1>：如何雙向傳值的問題（在頁面控制器設(shè)置的數(shù)值傳遞到分頁模塊控制器，以及每次點(diǎn)擊分頁怎么樣將頁碼傳回頁面控制器用于調(diào)用接口的傳參）　

一點(diǎn)分享：link鏈接方法與指令的controller有啥關(guān)系（貌似都可以進(jìn)行數(shù)據(jù)的操作）指令的控制器和link函數(shù)可以進(jìn)行互換?？刂破髦饕怯脕硖峁┛稍谥噶铋g復(fù)用的行為，但鏈接函數(shù)只能在當(dāng)前內(nèi)部指令中定義行為，且無法在指令間復(fù)用.link函數(shù)可以將指令互相隔離開來，而controller則定義可復(fù)用的行為。（指令是可以嵌套的，還記得我們指令中有一個(gè)require的屬性嗎？）

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: