angularJS 分页不读取当前页码

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

发生这种情况的原因是因为某些指令在该元素中创建了一个范围，并且由于范围的相关方式（继承），您的属性最终被隐藏了，所以子项与父项不同。

这很烦人而且很复杂，这就是为什么根本没有解决这个问题的最佳方法。除了对实际模型的引用（例如，控制器实例，由 controllerAs 机制提供便利），不要在 $scope 中放入其他内容

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 分页不读取当前页码

angularJS pagination not reading current page number

pagination

angularjs

angular-ui-bootstrap