在分页UI角投掷引导＆QUOT;错误：[$编译：nonassign] QUOT; [英] 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. 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!

如果我理解正确的话，这表明我使用不当的东西双向绑定？能够复制错误在这Plunkr： http://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy

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?

推荐答案

的能力使用 NG-模型在引入的UI bootstrap-第三方物流企业 - 0.11.0.js ，如<一个解释href=\"https://github.com/angular-ui/bootstrap/commit/a81d6f986ad123d1fe68f5750d4b22f0da193654\">changelog:

两者分页和寻呼机现在集成与 ngModelController 结果
   * 页是 NG-模型替换。结果
   * 上选页是因为 NG-变化现在可以使用删除。结果
    之前：结果
      ＆LT;分页页面=当前的选页=改变（页）...＆GT;＆LT; /分页＆GT;
    后：结果
    ＆LT;分页NG模型=当前NG变化=更改（）...＆GT;＆LT; /分页＆GT;

Both pagination and pager are now integrated with ngModelController.
* page is replaced from 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的引导，第三方物流企业，0.10.0.min.js ，您需要使用旧的语法 - 以页而不是 NG-模型：

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>

这篇关于在分页UI角投掷引导＆QUOT;错误：[$编译：nonassign] QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！