分页组件实现

HTML页面展示代码：

<ul class="ptl-pagination">
  <li class="hover pagination" 
   ng-class="{paginationPrevious:_page.currentPage>1,paginationdisableprevious:_page.currentPage==1}"
   ng-click="queryData('previous',$event)">
  </li>
  <li class="pagination hover page-num" 
   ng-show="_page.totalPage>4&&_page.totalPage-_page.currentPage<1&&_page.currentPage>4"
   ng-click="queryData(_page.currentPage-4)">{{_page.currentPage-4}}
  </li>
  <li class="pagination hover page-num" 
   ng-show="_page.totalPage>3&&_page.totalPage-_page.currentPage<2&&_page.currentPage>3" 
   ng-click="queryData(_page.currentPage-3)">{{_page.currentPage-3}}
  </li>
  <li class="pagination hover page-num" ng-show="_page.currentPage>2" 
   ng-click="queryData(_page.currentPage-2)">{{_page.currentPage-2}}
  </li>
  <li class="pagination hover page-num" ng-show="_page.currentPage>1" 
   ng-click="queryData(_page.currentPage-1)">{{_page.currentPage-1}}
  </li>
  <li class="pagination-current pagination">{{_page.currentPage}}
  </li>
  <li class="pagination hover" ng-show="_page.totalPage-_page.currentPage>0" 
   ng-click="queryData(_page.currentPage+1)">{{_page.currentPage+1}}
  </li>
  <li class="pagination hover page-num" ng-show="_page.totalPage-_page.currentPage>1" 
   ng-click="queryData(_page.currentPage+2)">{{_page.currentPage+2}}
  </li>
  <li class="pagination hover page-num" ng-show="_page.totalPage-_page.currentPage>4" 
   ng-click="queryData(_page.currentPage+3)" style="background:#fff;border:0px">...
  </li>
  <li class="pagination hover page-num" 
   ng-show="_page.totalPage-_page.currentPage>2 && _page.totalPage-_page.currentPage!=3" 
   ng-click="queryData(_page.totalPage-1)">{{_page.totalPage-1}}
  </li>
  <li class="pagination hover page-num" 
   ng-show="_page.totalPage-_page.currentPage>3||_page.totalPage-_page.currentPage==3" 
   ng-click="queryData(_page.totalPage)">{{_page.totalPage}}
  </li>
  <li class="hover pagination" 
   ng-class="{paginationNext:_page.currentPage<_page.totalPage,paginationdisablenext:_page.currentPage==_page.totalPage}" 
   ng-click="queryData('next',$event)">
  </li>
</ul>


controller代码：
controller: function ($scope, $element, $attrs, $rootScope) {
  $scope._page = $attrs.tableid ? $scope.page[$attrs.tableid] : $scope.page;

  $scope.queryData = function(type)
  {
    var method = $attrs.method;
    switch (type)
    {
      case "first":
        $scope._page.currentPage = 1;
        break;
      case "previous":
        $scope._page.currentPage = $scope._page.currentPage - 1;
        break;
      case "next":
        $scope._page.currentPage = $scope._page.currentPage + 1;
        break;
      case "last":
        $scope._page.currentPage = $scope._page.totalPage;
        break;
      case "pageSize":
        $scope._page.pageSize = $scope.pageSize;
        break;
      default:
        $scope._page.currentPage = type;
        break;
    }

    if ($scope._page.currentPage < 1) {
      $scope._page.currentPage = 1;
      return;
    }
    if ($scope._page.currentPage > $scope._page.totalPage) {
      $scope._page.currentPage = $scope._page.totalPage;
      return;
    }
    $scope.$eval(method);
  };
}