Angular UI Bootstrap 中的分页抛出“错误:[$compile:nonassign]"; [英] Pagination in Angular UI Bootstrap throwing "Error: [$compile:nonassign]"
问题描述
我正在使用 Angular Bootstrap UI 的分页指令的一个相当简单的实现,但我不断收到一个我无法弄清楚的错误.以下是相关片段:
<li ng-repeat="过滤想法中的待办事项">{{去做}}
<pagination ng-model="currentPage" total-items="totalIdeas"></pagination>
以下是控制器中 $scope 的相关部分:
//在分页号上设置监视$scope.$watch('currentPage + numPerPage', function() {var begin = (($scope.currentPage - 1) * $scope.numPerPage);var end = begin + $scope.numPerPage;$scope.filteredIdeas = $scope.ideasData.slice(begin, end);});//数据$scope.ideasData = [];for (var i = 0; i <100; i++) {$scope.ideasData.push('要做' + i);}$scope.filteredIdeas = [];$scope.currentPage = 1;$scope.numPerPage = 10;$scope.totalIdeas = $scope.ideasData.length;
分页设置正确,但这是我在尝试单击下一页(或与此相关的任何页面)时收到的错误:
错误:[$compile:nonassign] 与指令 'pagination' 一起使用的表达式 'undefined' 是不可赋值的!
如果我理解正确,这是否表明我在双向绑定中使用了不正确的东西?能够复制此 Plunkr 中的错误:http://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy>
有人对我做错了什么有任何想法吗?
在 ui-bootstrap-tpls-0.11.0.js
中引入了使用 ng-model
的能力代码>,如变更日志中所述:
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模型
:
<pagination page="currentPage" total-items="totalIdeas"></pagination>
I'm using a fairly simple implementation of Angular Bootstrap UI's pagination directive, yet I keep getting an error I cannot figure out. 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:
// 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
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:
Both
pagination
andpager
are now integrated withngModelController
.
*page
is replaced withng-model
*on-select-page
is removed sinceng-change
can now be used
Before:
<pagination page="current" on-select-page="changed(page)" ...></pagination>
After:
<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
:
<pagination page="currentPage" total-items="totalIdeas"></pagination>
这篇关于Angular UI Bootstrap 中的分页抛出“错误:[$compile:nonassign]";的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!