Angular UI Bootstrap分页ng-model不更新

Question

我正在尝试在我的项目中使用UI Bootstrap Pagination指令,但由于某些奇怪的原因,用于更新当前页面的ng模型不起作用.使用正确数量的选项卡和所有内容正确显示分页,但是当我单击其他数字时,ng-model变量不会更新.对于我的生活,我无法弄清楚为什么不.

我使用的代码取自UI Bootstrap主页上的示例:

<uib-pagination total-items="totalItems" ng-model="currentPage"
  ng-change="pageChanged()"></uib-pagination>

控制器看起来像这样:

$scope.currentPage = 1;
$scope.totalItems = 160;

$scope.pageChanged = function() {
  console.log('Page changed to: ' + $scope.currentPage);
};

以下是我需要的不同来源:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>

最奇怪的是我创建了一个复制我的代码的plnkr,它的工作原理!你可以在这里看到:http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6

任何人都可以想到可能导致这种情况无效的任何想法吗？我在这里摸不着头脑,想不出任何明显我做错的事......

所有的帮助都很有帮助!

Answer 1

我遇到了同样的问题并通过将所有Angular UI Bootstrap Pagination参数包装到对象中来解决它,如下所示:

JS

$scope.pagination = {
    currentPage: 1,
    maxSize: 21,
    totalItems: data.count
};

HTML

<uib-pagination
    total-items="pagination.totalItems" 
    ng-model="pagination.currentPage" 
    max-size="pagination.maxSize"
    boundary-link-numbers="true" 
    ng-change="pageChanged()"></uib-pagination>