angularjs使用directive实现分页组件的示例

<ul class="page clearfix">  <li ng-hide="currentPage <= 1">    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" firstPage()">      <i class="fa fa-step-backward"></i>    </a>    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" prePage()">      <i class="fa fa-play fa-flip-horizontal"></i>    </a>  </li>  <li>    <span>页码</span>    <input type="text" ng-model="currentPage">/    <span ng-bind="totalPage"></span>  </li>  <li ng-hide="currentPage >= totalPage">    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" nextPage()">      <i class="fa fa-play"></i>    </a>    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lastPage()">      <i class="fa fa-step-forward"></i>    </a>  </li></ul>

/* 分页 */.page {  margin: 15px 0;  padding: 0;  float: right;}.page li {  list-style: none;  float: left;  height: 30px;  line-height: 30px;}.page li input {  padding: 3px 5px;  height: 100%;  width: 50px;  border: none;  background-color: #EAEEF1;  text-align: center;  margin-right: 10px;}.page li span {  margin-right: 15px;}.page li a {  text-decoration: none;  outline: none;  margin-right: 15px;}

App.directive('paging', function() { // 分页  return {    restrict: 'A',    replace: true,    scope: {      totalPage: '=totalPage',      currentPage: '=currentPage',      getData: '&getData'    },    templateUrl: 'app/views/partials/paging.html',    controller: function($scope) {      $scope.firstPage = function() { $scope.currentPage = 1; }      $scope.lastPage = function() { $scope.currentPage = $scope.totalPage; }      $scope.prePage = function() { $scope.currentPage--; }      $scope.nextPage = function() { $scope.currentPage++; }      $scope.$watch('currentPage', function(newVal, oldVal) {        if(newVal != oldVal && newVal) $scope.getData();      })    }  };});

$scope.current_page = 1; // 当前页$scope.getData = function() {  $scope.param.page = $scope.current_page;  ConnectApi.start('post', 'index/student/getschoolclasslist', $scope.param).then(function(response) { // 这个ConnectApi 你大可不必关心，这是我封装的http函数    var data = ConnectApi.data({ res: response, _index: index });    $scope.data = data.data;    $scope.totalpage = data.data.total_page; // 服务器端返回的总页数  }}$scope.getData(); // 获取数据的函数

<div paging total-page="totalpage" current-page="current_page" get-data="getData()"></div>