一尘不染

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

angularjs

我使用的是Angular Bootstrap UI的分页指令的相当简单的实现,但是我不断收到我无法弄清楚的错误。以下是相关片段:

<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

有人对我在做什么错有任何想法吗?


阅读 448

收藏
2020-07-04

共1个答案

一尘不染

的使用能力ng-model已引入ui-bootstrap- tpls-0.11.0.js,如changelog中所述:

paginationpager现在都与集成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>
2020-07-04