CODEWITHSUNDEEP
angularjspaginationangular-ui-bootstrap
user554180
user554180

Reputation:

Angularjs pagination errors

I am trying to integrate an Angular UI pagination directive from here -> http://angular-ui.github.io/bootstrap/#/pagination

The problem is that, when I click on the any of the pagination buttons, I get the following error.

Error: [$compile:nonassign] Expression 'undefined' used with directive 'pagination' is non-assignable!
http://errors.angularjs.org/1.3.0-beta.7/$compile/nonassign?p0=undefined&p1=pagination
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:78:12
    at parentSet (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:6618:25)
    at Object.parentValueWatch (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:6632:23)
    at Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:12550:40)
    at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:12823:24)
    at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:19757:21)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:2883:10
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:327:20)
    at HTMLAnchorElement.eventHandler (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:2882:5) angular.js:10028
(anonymous function) angular.js:10028
(anonymous function) angular.js:7349
Scope.$digest angular.js:12577
Scope.$apply angular.js:12823
(anonymous function) angular.js:19757
(anonymous function) angular.js:2883
forEach angular.js:327
eventHandler

This is the code for the pagination element:

<pagination total-items="totalItems" max-size="5" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="PageChanged()"></pagination>

This seems like a bug with the directive itself but I am not sure.

Upvotes: 2

Views: 2167

Answers (2)

j.wittwer
j.wittwer

Reputation: 9497

Looks like you need to either upgrade to ui-bootstrap-tpls-0.11.0.js, or use the old syntax:

page="currentPage"

See also Pagination in Angular UI Bootstrap throwing "Error: [$compile:nonassign]"

Upvotes: 5

mortsahl
mortsahl

Reputation: 600

You are using Angular 1.3.0-beta.7 -- I wouldn't expect 3rd party directives to work until 1.3 is officially released and the 3rd party directives are updated.

Drop down to the latest official stable release

Upvotes: 0

Related Questions