angular分页指令

目前的多个项目中都用到分页这个功能，为了提高可复用性，我特地分离出来写了个分页的指令。直接贴代码，详情如下：

index.html

  <body id="sBill" ng-controller="map_ctrl">
     <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px;">
       <tbody>
           <tr ng-repeat="l in orderList">
               <td><input type="radio" name="id" ng-click="select(l.id)" value="{{l.id}}" /></td>
               <td>{{l.time}}</td>
           </tr>
       </tbody>
     </table>
     <!-- paging datalist属性值(dataList)为要分页的原始数据-->
     <rj-date datalist="dataList"></rj-date> 

  </body>

index.js

 var app = angular.module("doSBill",[]);

 app.controller("map_ctrl",function($scope,$http,$location,$timeout){
     // 原始数据
     $scope.dataList=[
     {'time':1},{'time':2},{'time':3},{'time':4},{'time':5},{'time':6},{'time':7},{'time':8},{'time':9},{'time':10},
     {'time':11},{'time':12},{'time':13},{'time':14},{'time':15},{'time':16},{'time':17},{'time':18},{'time':19},{'time':20},
     {'time':21},{'time':22},{'time':23},{'time':24},{'time':25},{'time':26},{'time':27},{'time':28},{'time':29},{'time':30},
     {'time':31}
     ];
     //$on：监听或接收数据；此处用于监听分页指令，修改的列表视图数据
     $scope.$on("orderList", function(e, orderList){
       $scope.orderList = orderList;
     });

 }); 

指令模板  page.html

 <div>
   <p>
     <span>
       总记录数：<span class="rjAllNums" ng-bind="page.nums"></span>
       本页记录数：<span class="rjNowNums" ng-bind="page.nowNums"></span>
     </span>
     <button class="rjFirtPage" ng-click="jumpPage(1,dataList)">首页</button>
     <button class="rjPrePage" ng-click="jumpPage(page.now-1,dataList)">上一页</button>
     <span>
       <span class="rjNowPage" ng-bind="page.now"></span>/
       <span class="rjAllPage" ng-bind="page.pageCount"></span>
     </span>
     <button class="rjNextPage" ng-click="jumpPage(page.now+1,dataList)">下一页</button>
     <button class="rjLastPage" ng-click="jumpPage(page.pageCount,dataList)">尾页</button>
     到第
     <input class="rjJumpInput" type="text" ng-model="page.jumpPage" name="rjPageName" value=""/>
      页
     <button class="rjJumpBtn" ng-click="jumpPage(page.jumpPage,dataList)">确定</button>
   </p>

 </div>

指令定义page.js

 app.directive('rjDate',function(){
         return {
             restrict: 'EA',
             replace: false,
             scope : {dataList:'=datalist'},//设置scope.dataList与指令属性“datalist”值绑定，详情看指令scop作用域
             templateUrl: 'pageDirective/template/page.html',
             link: function(scope,elem,attr){

                 var page={};//分页对象
                 scope.page=page;
                 scope.page.onePageNums=10; //每页记录数
                 scope.page.nums=0;
                 scope.page.now=1;
                 scope.page.nowNums=0;
                 scope.page.pageCount=1;
                 scope.getPage=getPage; //设置获取页面的ng-click
                 scope.page.orderList=[];

                 getPage(1,scope.dataList);//初始化获取第一页数据

                 scope.jumpPage=function(page,dataList){
                     if(!parseInt(page)){
                       return null;
                     }
                     getPage(page,dataList);
                   }
                 function getPage(pageNow,dataList){//获取指定的页面
                       scope.page.nums=dataList.length; //设置总记录数
                       scope.page.now=pageNow;//设置当前是第几页
                      pagination();//设置当前有多少页面 生成一个页面数组
                      scope.page.orderList=getOnePage(dataList);//获取一页的数据
                      scope.$emit("orderList", scope.page.orderList);//$emit：子传父，传递event与data；此处用于给父controller传递数据orderList
                 }

                 function getOnePage(arr){//获取一页的数据
                     if(arr==null){
                       return null;
                     }
                     var newarr=new Array();
                     if(scope.page.now<1){
                         scope.page.now=1;
                     }
                     if(scope.page.now>scope.page.pageCount){
                         scope.page.now=scope.page.pageCount;
                     }
                     scope.page.nowNums=scope.page.onePageNums;
                     var pagenow=scope.page.now;  

                     var begin=(pagenow-1)*scope.page.onePageNums;
                     var end=begin+scope.page.onePageNums;
                     var lens=scope.page.nums;

                     if(end>lens){
                         end=lens;
                         scope.page.nowNums=lens-begin;
                     }

                     for(begin;begin<end;begin++){
                         newarr.push(arr[begin]);
                     }
                         return newarr;
                 }
                 function pagination(){//设置当前有多少页面 生成一个页面数组
                     if(scope.page.nums<=scope.page.onePageNums){
                         scope.page.pageCount=1;
                     }else{
                         if(scope.page.nums%scope.page.onePageNums==0){
                             scope.page.pageCount=scope.page.nums/scope.page.onePageNums;
                         }else{
                             scope.page.pageCount=parseInt(scope.page.nums/scope.page.onePageNums)+1;
                         }
                     }
                 }

             }
         }
     }); 

效果如图所示：