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

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

成都创新互联公司专注于鹤庆网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供鹤庆营销型网站建设，鹤庆网站制作、鹤庆网页设计、鹤庆网站官网定制、成都小程序开发服务，打造鹤庆网络公司原创品牌,更为您提供鹤庆网站排名全网营销落地服务。

html:

  
    
      
    
    
      
    
  
  

    页码
    /
    
  
  = totalPage">
    
      
    
    
      
    
  

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: