怎么在angularjs中利用directive实现一个分页组件

怎么在angularjs中利用directive实现一个分页组件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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

参数：

• totalPage: 总页数,

• currentPage: 当前页,

• getData: 点击分页所触发的函数

用法：

controller：

$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(); // 获取数据的函数

html:

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

关于怎么在angularjs中利用directive实现一个分页组件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。