Angular UI Bootstrap 中的分页抛出“错误：[$compile:nonassign]”

Question

我正在使用 Angular Bootstrap UI 的分页指令的一个相当简单的实现，但我不断收到一个我无法弄清楚的错误。这是相关的sn-ps：

<ul>
  <li ng-repeat="todo in filteredIdeas">
    {{todo}}
  </li>
</ul>
<pagination ng-model="currentPage" total-items="totalIdeas"></pagination>

以下是控制器中我的 $scope 的相关部分：

// Set watch on pagination numbers
$scope.$watch('currentPage + numPerPage', function() {

  var begin = (($scope.currentPage - 1) * $scope.numPerPage);
  var end = begin + $scope.numPerPage;

  $scope.filteredIdeas = $scope.ideasData.slice(begin, end);

});


// Data
$scope.ideasData = [];

for (var i = 0; i < 100; i++) {
  $scope.ideasData.push('To do ' + i);
}

$scope.filteredIdeas = [];
$scope.currentPage = 1;
$scope.numPerPage = 10;
$scope.totalIdeas = $scope.ideasData.length;

分页设置正确，但这是我在尝试单击下一页（或任何页面）时收到的错误：

Error: [$compile:nonassign] Expression 'undefined' used with directive 'pagination' is non-assignable!

如果我理解正确，这是否表明我在双向绑定中使用了不正确的东西？能够复制此 Plunkr 中的错误：http://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy

有人对我做错了什么有任何想法吗？

Answer 1

ui-bootstrap-tpls-0.11.0.js 中引入了使用ng-model 的功能，如changelog 中所述：

pagination 和 pager 现在都与 ngModelController 集成。
* page 替换为 ng-model
* on-select-page 已被删除，因为现在可以使用 ng-change
之前：
<pagination page="current" on-select-page="changed(page)" ...></pagination> 之后：
<pagination ng-model="current" ng-change="changed()" ...></pagination>

由于您使用的是ui-bootstrap-tpls-0.10.0.min.js，因此您需要使用旧语法 - 使用page 而不是ng-model：

<pagination page="currentPage" total-items="totalIdeas"></pagination>

Answer 2

举个具体的例子：

 <uib-pager total-items="totalItems" items-per-page="4" ng-model="currentPage" ng-change="pageChanged()"></uib-pager>

然后在你的范围内绑定 pageChanged：

$scope.pageChanged=function(){
      console.log("Current page" + $scope.currentPage);
  };