将angular-ui的分页组件封装成指令的方法详解

准备工作：

（1）一如既往的我还是使用了requireJS进行js代码的编译

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

首先抛出几个问题：

a）:何时回用到分页 (当后端返回的数据过多，一页装不满时，我们必须要采取分页的效果，给用户良好的视觉效果)

b）:分页一般要传递哪些数据 （总的数据数量，每页固定显示多少条数据，当点击分页时候返回当前的页码.......这三条是必须的）

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

我会在 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" 分页函数="" ng-change="pageChanged()" 是否将当前页显示在中间="" rotate="true" 是否显示首页，和末页的数字="" boundary-link-numbers="true" 是否显示“.....”这几个点="" force-ellipses="true" 显示页码的页码tabs数量（不包含首页，末页）="" max-size="maxSize" 当前页="" ng-model="bigCurrentPage" 每页显示的数据条数="" 　　　　="" items-per-page="pageSize" 总的数据记录数="" 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:'=',   //用于获取页面控制器传回来的数据（例如：总得记录数，每页显示的数量等....）     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页面上使用分页的功能（你可以在各个有多条数据现实的页面使用分页）

<p>this is page dir</p><pagedir ng-click="getCurPage()" currentpage="currentpage" data="dataPage"> </pagedir> 

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"     }    } })