Angular UI Bootstrap分页ng-model不更新

I am trying to use a UI Bootstrap Pagination directive in my project, but for some strange reason the ng-model used for updating the current page is not working. The pagination is showing up correctly with the correct number of tabs and everything, but when I click on a different number, the ng-model variable is not getting updated. For the life of me, I can't figure out why not.

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

The code I am using is taken from the examples on the UI Bootstrap homepage:

我正在使用的代码取自UI Bootstrap主页上的示例：

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

The controller looks like this:

控制器看起来像这样：

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

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

Here are the different required sources I am including:

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

<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>

The strangest thing is I have created a plnkr which replicates my code and it works! You can see here: http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6

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

Can anybody think of any ideas that might be causing this not to work? I'm scratching my head here, and can't think of anything obvious I am doing wrong...

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

All help much apprecatiated!

所有帮助都很有帮助！

2 个解决方案

#1

I ran through the same problem and solved it by wrapping all Angular UI Bootstrap Pagination parameters into the object, like so:

我遇到了同样的问题并通过将所有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>

#2

I also had same issue. Found that the bootstrap-tpls-0.10.0.js was causing this issue. Just replaced it with bootstrap-tpls-0.11.0.js to make it work.

我也有同样的问题。发现bootstrap-tpls-0.10.0.js导致了这个问题。刚用bootstrap-tpls-0.11.0.js替换它以使其工作。

Below is the library combination that works:

以下是适用的库组合：

<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>