Seitennummerierung in Angular UI Bootstrap werfend "Fehler: [$ compile: nonassign]"

Question

Ich benutze eine ziemlich einfache Implementierung von Angular Bootstrap UI Paginierung Direktive, aber ich bekomme immer einen Fehler, den ich nicht herausfinden kann. Hier ist der relevante Schnipsel:

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

Hier sind die relevanten Teile meines $ scope in der Steuerung:

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

Paginierung setzt sich korrekt, aber hier ist der Fehler, den ich erhalten, wenn sie versuchen auf klicken Auf der nächsten Seite (oder eine Seite für diese Angelegenheit):

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

Wenn ich richtig verstehe, ist dies darauf hinweist, dass ich die Bindung etwas falsch für zwei-Wege verwendet werden? War in der Lage, den Fehler in diesem Plunkr zu replizieren: http://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy

Wer hat irgendwelche Gedanken darüber, was ich falsch mache?

Answer 1

Die Fähigkeit ng-model zu verwenden, wurde in ui-bootstrap-tpls-0.11.0.js eingeführt, wie es in der changelog erklärt:

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>

Da Sie ui-bootstrap-tpls-0.10.0.min.js verwenden, können Sie die alte Syntax verwenden müssen - mit page statt ng-model:

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

Answer 2

Nur um konkretes Beispiel zu geben:

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

und dann in Ihrem Umfang pageChanged Bindung:

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