我使用的是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
有人对我在做什么错有任何想法吗?
的使用能力ng-model已引入ui-bootstrap- tpls-0.11.0.js,如changelog中所述:
ng-model
ui-bootstrap- tpls-0.11.0.js
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>
pagination
pager
ngModelController
page
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:
ui-bootstrap-tpls-0.10.0.min.js
<pagination page="currentPage" total-items="totalIdeas"></pagination>