Question

我正在尝试在我的angularJS项目中实现ui.bootstrap.pagination，但我似乎无法读取当前的页码，即使我已经设置了ng-model。我使用的是angular-ui-bootstrap版本0.13.3。

我的html的相关部分：

    <pagination 
      data-ng-model="currentPage" 
      data-ng-change = "paginate()"
      data-total-items="repositories.total_count" 
      data-items-per-page="numPerPage" 
      data-max-size="maxSize" 
      data-boundary-links="true" >
    </pagination>

我的代码：

angular.module('myApp.repositories')
.controller('RepositoryController', ['$scope', function($scope) {
  $scope.repositories = {};
  $scope.currentPage = 1;
  $scope.numPerPage = 30; // Number of items per page, set by Github API
  $scope.maxSize = 10; // Number of pages to show in pagination

  $scope.paginate = function() {    
    $http.get('https://api.github.com/search/repositories/', { 
      params: {
        q: 'twitter',
        page: $scope.currentPage
      }
    })
    .then(function(response){
        if(response.data){
            $scope.repositories = response.data;
        }
    });
  };
}]);

分页显示符合预期，我可以使用它而不会抛出错误，但在我的paginate（）函数中，$ scope.currentPage始终读取1。

我可能会遗漏或忽略一些非常基本的东西，但我似乎无法弄清楚它为什么不起作用。

Answer 1

模型中始终有一个点。试试这个：

<pagination 
  data-ng-model="vm.currentPage"

...

  $scope.vm = {currentPage: 1};

要防止出现此类问题，请使用controllerAs并避免使用$scope作为模型。

请参阅本指南：https://github.com/johnpapa/angular-styleguide#controllers

发生这种情况的原因是因为某些指令正在该元素中创建一个范围，并且由于范围相关（继承）的方式，您的属性最终被遮蔽，因此该子元素与该元素不同。在父母身上。

这非常烦人和复杂，这就是解决这个问题的最佳方法。除了对实际模型的引用之外，不要将内容放在$scope中（例如，由controllerAs机制促成的控制器实例）

Answer 2

我已经迟到了几个月但是，我想确保这个问题的未来读者不要混淆。使用$ scope是完全有效的，实际上是开始使用AngularJS的一种很好的方法。 “Controller As”语法是可选的。

此处的解决方案非常简单：将选定的页码传递给“Paginate”功能。然后使用该值设置$ scope.currentPage。

 angular.module('myApp.repositories')
 .controller('RepositoryController', ['$scope', function($scope) {
 $scope.repositories = {};
 $scope.currentPage = 1;
 $scope.numPerPage = 30; // Number of items per page, set by Github API
 $scope.maxSize = 10; // Number of pages to show in pagination

 $scope.paginate = function(pageNumber) {  
   $scope.currentPage = pageNumber;
  $http.get('https://api.github.com/search/repositories/', { 
  params: {
    q: 'twitter',
    page: $scope.currentPage
  }
  })
  .then(function(response){
    if(response.data){
        $scope.repositories = response.data;
    }
  });
};
}]);

angularJS分页不读取当前页码

2 个答案: