Angular UI Bootstrap 模型分页未更新

Question

我正在尝试在我的项目中使用 UI Bootstrap 分页指令，但由于某些奇怪的原因，用于更新当前页面的 ng-model 无法正常工作。分页正确显示了正确数量的选项卡和所有内容，但是当我单击不同的数字时，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 分页参数包装到对象中解决了这个问题，如下所示：

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>

Answer 2

我也有同样的问题。发现 bootstrap-tpls-0.10.0.js 导致了这个问题。只需将其替换为 bootstrap-tpls-0.11.0.js 即可使其正常工作。

以下是有效的库组合：

<script src="http://code.angularjs.org/1.4.8/angular.js"></script>  
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>  
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Angular UI Bootstrap 模型分页未更新

Angular UI Bootstrap Pagination ng-model not updating

twitter-bootstrap

angularjs

angular-ui-bootstrap

JS

HTML