angularjs – 分页在Angular UI Bootstrap抛出“错误：[$compile

发布时间：2020-12-17 08:08:49 所属栏目：安全来源：网络整理

导读：我使用Angular Bootstrap UI的分页指令的一个相当简单的实现，但是我一直在收到一个我无法想象的错误。以下是相关的片段： ul li ng-repeat="todo in filteredIdeas" {{todo}} /li/ulpagination ng-model="currentPage" total-items="totalIdeas"/pagination

我使用Angular Bootstrap UI的分页指令的一个相当简单的实现，但是我一直在收到一个我无法想象的错误。以下是相关的片段：

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

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

// 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中复制bug

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

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

Both pagination and pager are now integrated with ngModelController.
* page is replaced with ng-model
* on-select-page is removed since ng-change can now be used
Before:
<pagination page="current" on-select-page="changed(page)" ...></pagination>
After:
<pagination ng-model="current" ng-change="changed()" ...></pagination>

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!