怎么在angularjs中利用directive實(shí)現(xiàn)一個(gè)分頁組件

怎么在angularjs中利用directive實(shí)現(xiàn)一個(gè)分頁組件？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

html:

<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>

css:

/* 分頁 */
.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;
}

directive:

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();
      })
    }
  };
});

參數(shù)：

• totalPage: 總頁數(shù),

• currentPage: 當(dāng)前頁,

• getData: 點(diǎn)擊分頁所觸發(fā)的函數(shù)

用法：

controller：

$scope.current_page = 1; // 當(dāng)前頁
$scope.getData = function() {
  $scope.param.page = $scope.current_page;
  ConnectApi.start('post', 'index/student/getschoolclasslist', $scope.param).then(function(response) { // 這個(gè)ConnectApi 你大可不必關(guān)心，這是我封裝的http函數(shù)
    var data = ConnectApi.data({ res: response, _index: index });
    $scope.data = data.data;
    $scope.totalpage = data.data.total_page; // 服務(wù)器端返回的總頁數(shù)
  }
}
$scope.getData(); // 獲取數(shù)據(jù)的函數(shù)

html:

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

關(guān)于怎么在angularjs中利用directive實(shí)現(xiàn)一個(gè)分頁組件問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。