Разбиение на страницы в Angular Загрузка бутстрапа UI "Ошибка: [$ compile: nonassign]"

Я использую довольно простую реализацию директивы Angular Bootstrap UI pagination, но все равно получаю ошибку, которую я не могу понять. Здесь соответствующие фрагменты:

<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

У кого-нибудь есть мысли о том, что я делаю неправильно?

Ответы

Ответ 1

Возможность использования 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>

Поскольку вы используете ui-bootstrap-tpls-0.10.0.min.js, вам нужно использовать старый синтаксис - с page вместо ng-model:

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

Ответ 2

Только для конкретного примера:

 <uib-pager total-items="totalItems" items-per-page="4" ng-model="currentPage" ng-change="pageChanged()"></uib-pager>

а затем привяжите страницу в списке:

$scope.pageChanged=function(){
      console.log("Current page" + $scope.currentPage);
  };