angularjs - ngbtooltip - Paginación en el lanzamiento de Bootstrap de interfaz de usuario angular "Error:[$ compile: nonassign]"

ngbmodule

Question

Estoy usando una implementación bastante simple de la directiva de paginación de Angular Bootstrap UI, pero sigo recibiendo un error que no puedo entender. Aquí están los fragmentos relevantes:

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

Aquí están las partes relevantes de mi $ alcance en el controlador:

// 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;

La paginación se configura correctamente, pero aquí está el error que recibo al intentar hacer clic en la página siguiente (o en cualquier página):

Error: [$compile:nonassign] Expression ''undefined'' used with directive ''pagination'' is non-assignable!

Si comprendo correctamente, ¿esto indica que estoy usando algo incorrectamente para el enlace de dos vías? Pude replicar el error en este Plunkr: http://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy

¿Alguien tiene alguna idea sobre lo que estoy haciendo mal?

Answer 1

La capacidad de usar ng-model se introdujo en ui-bootstrap-tpls-0.11.0.js , como se explica en el changelog :

Tanto la pagination como el pager ahora están integrados con ngModelController .
* la page es reemplazada con ng-model
* on-select-page se elimina ya que ahora se puede usar ng-change
Antes de:
<pagination page="current" on-select-page="changed(page)" ...></pagination> Después de:
<pagination ng-model="current" ng-change="changed()" ...></pagination>

Ya que está usando ui-bootstrap-tpls-0.10.0.min.js , necesita usar la sintaxis antigua - con page lugar de ng-model :

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

Answer 2

Solo para dar un ejemplo concreto:

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

y luego empate a pageChanged en tu alcance:

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