[英]Pagination in Angular UI Bootstrap throwing “Error: [$compile:nonassign]”
I'm using a fairly simple implementation of Angular Bootstrap UI's pagination directive, yet I keep getting an error I cannot figure out. 我正在使用Angular Bootstrap UI的分页指令的相当简单的实现,但我一直得到一个我无法弄清楚的错误。 Here's the relevant snippets: 这是相关的片段:
<ul>
<li ng-repeat="todo in filteredIdeas">
{{todo}}
</li>
</ul>
<pagination ng-model="currentPage" total-items="totalIdeas"></pagination>
Here are the relevant portions of my $scope in the controller: 以下是控制器中$ 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;
The pagination sets itself up correctly, but here's the error I receive when trying to click on the next page (or any page for that matter): 分页设置正确,但这是我在尝试点击下一页(或任何页面)时收到的错误:
Error: [$compile:nonassign] Expression 'undefined' used with directive 'pagination' is non-assignable!
If I understand correctly, this is indicating that I'm using something improperly for two-way binding? 如果我理解正确,这表明我正在使用不正确的双向绑定? Was able to replicate the bug in this Plunkr: http://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy 能够复制这个Plunkr中的错误: http ://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy
Anyone have any thoughts on what I'm doing wrong? 任何人都对我做错了什么有任何想法?
The ability to use ng-model
was introduced in ui-bootstrap-tpls-0.11.0.js
, as explained in the changelog : 在ui-bootstrap-tpls-0.11.0.js
引入了使用ng-model
的能力,如更改日志中所述:
Both
pagination
andpager
are now integrated withngModelController
. 现在,pagination
和pager
都与ngModelController
集成在一起。
*page
is replaced withng-model
*page
替换为ng-model
*on-select-page
is removed sinceng-change
can now be used *on-select-page
被删除,因为现在可以使用ng-change
Before: 之前:
<pagination page="current" on-select-page="changed(page)" ...></pagination>
After:<pagination page="current" on-select-page="changed(page)" ...></pagination>
之后:
<pagination ng-model="current" ng-change="changed()" ...></pagination>
Since you are using ui-bootstrap-tpls-0.10.0.min.js
, you need to use the old syntax - with page
instead of ng-model
: 由于您使用的是ui-bootstrap-tpls-0.10.0.min.js
,因此您需要使用旧语法 - 使用page
而不是ng-model
:
<pagination page="currentPage" total-items="totalIdeas"></pagination>
Just to give concrete example: 只是举一个具体的例子:
<uib-pager total-items="totalItems" items-per-page="4" ng-model="currentPage" ng-change="pageChanged()"></uib-pager>
and then tie pageChanged in your scope: 然后在你的范围内绑定pageChanged:
$scope.pageChanged=function(){
console.log("Current page" + $scope.currentPage);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.