pagination-id with track by conflict

[ychaker]

Hey,
I have a minor bug that I can't get around.
Here's the markup:

<li dir-paginate="case in casesScope.cases | filter:q | itemsPerPage: pagination.owner.pageSize track by case.caseNo" current-page="pagination.owner.currentPage" pagination-id="owner" class="list-group-item">

and the error that I get is the following:

15:02:18.023 "Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 13 of the expression [case.caseNo : 'owner'] starting at [: 'owner'].
http://errors.angularjs.org/1.2.28/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=13&p3=case.caseNo%20%3A%20'owner'&p4=%3A%20'owner'
minErr/<@http://localhost:5000/bower_components/angular/angular.js:78:12
Parser.prototype.throwError@http://localhost:5000/bower_components/angular/angular.js:10601:1
Parser.prototype.parse@http://localhost:5000/bower_components/angular/angular.js:10554:7
$ParseProvider/this.$get</<@http://localhost:5000/bower_components/angular/angular.js:11407:30
ngRepeatDirective</<.link@http://localhost:5000/bower_components/angular/angular.js:20604:30
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6752:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
publicLinkFn@http://localhost:5000/bower_components/angular/angular.js:6042:30
dirPaginationLinkFn@http://localhost:5000/bower_components/angular-utils-pagination/dirPagination.js:109:17
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6752:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6746:1
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6746:1
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6149:13
publicLinkFn@http://localhost:5000/bower_components/angular/angular.js:6042:30
ngViewFillContentFactory/<.link@http://localhost:5000/bower_components/angular-route/angular-route.js:915:7
nodeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6752:13
compositeLinkFn@http://localhost:5000/bower_components/angular/angular.js:6146:13
publicLinkFn@http://localhost:5000/bower_components/angular/angular.js:6042:30
createBoundTranscludeFn/boundTranscludeFn@http://localhost:5000/bower_components/angular/angular.js:6166:21
controllersBoundTransclude@http://localhost:5000/bower_components/angular/angular.js:6773:18
update@http://localhost:5000/bower_components/angular-route/angular-route.js:865:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:5000/bower_components/angular/angular.js:13093:15
updateRoute/<@http://localhost:5000/bower_components/angular-route/angular-route.js:547:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/bower_components/angular/angular.js:11682:31
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/bower_components/angular/angular.js:11682:31
qFactory/ref/<.then/<@http://localhost:5000/bower_components/angular/angular.js:11768:26
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:5000/bower_components/angular/angular.js:12811:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:5000/bower_components/angular/angular.js:12623:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:5000/bower_components/angular/angular.js:12915:13
done@http://localhost:5000/bower_components/angular/angular.js:8450:34
completeRequest@http://localhost:5000/bower_components/angular/angular.js:8664:7
createHttpBackend/</xhr.onreadystatechange@http://localhost:5000/bower_components/angular/angular.js:8603:1
" "<!-- ngRepeat: case in casesScope.cases | filter:q | itemsPerPage: pagination.owner.pageSize track by case.caseNo : 'owner' -->

Seems like an edge case that was not handled. Unless I missed something.

I did try to manually set the id in this manner:

<li dir-paginate="case in casesScope.cases | filter:q | itemsPerPage: pagination.owner.pageSize :owner track by case.caseNo" current-page="pagination.owner.currentPage" class="list-group-item">

but then the controls won't work:

"pagination directive: the pagination controls (id: owner) cannot be used without the corresponding pagination directive." "<dir-pagination-controls class="ng-isolate-scope" pagination-id="owner">"

How can I have both working together?

[ychaker]

Managed to solve it after some trial and error.

<li dir-paginate="case in casesScope.cases | filter:q | itemsPerPage: pagination.owner.pageSize : 'owner' track by case.caseNo" current-page="pagination.owner.currentPage" pagination-id="owner" class="list-group-item">

the difference is having the pagination-id attribute but also adding the '' around the id inside the pagination filter part of the directive.

[SaleGajic]

I have the same problem but i didn't manage to solve it.
I have directive:

<div dir-paginate="product in localStorage.favourites |
orderBy : reverse | itemsPerPage : 10 track by product.idItem" pagination-id="products">

And i get error:

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 16 of the expression [product.idItem : 'products'] starting at [: 'products'].
http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=16&p3=product.idItem%20%3A%20'products'&p4=%3A%20'products'
    at REGEX_STRING_REGEXP 

If i remove track by product.idItem part, then it works fine, but i put track by there if user by accidante add one product to favourite list twice, then idItem would not be unique.

What did i do wrong?

[michaelbromley]

Hi @SaleGajic, I looked into the issue you reported, and I even wrote a couple of new test cases to try to reproduce the issue, but things seem to work for me. Can you check that you are using the latest version of the module? Version 0.9.0 is the most recent release of bower / npm.

[liam-betsworth]

I've just come across the same issue. It appeared just after adding 'track by'. Removing it removes the error, but I need 'track by' to keep track of the id for me...

I'm running the latest release.

[michaelbromley]

Hi @liam-betsworth-leadin, can you show me the exact expression which is causing the error?

[liam-betsworth]

Sure. It was very similar to @ychaker's expression:

<tr dir-paginate="skill in skills | filter: query | itemsPerPage: 10 track by $index" pagination-id="skillsPagination">

And similarly to @ychaker, I was able to fix it by inserting the pagination id in inverted commas:

<tr dir-paginate="skill in skills | filter: query | itemsPerPage: 10 : 'skillsPagination' track by $index" pagination-id="skillsPagination">

[michaelbromley]

Does skillsPagination correspond to a scope variable? Or is it just intended as a string literal?

[liam-betsworth]

I'm using it as a string literal.

[michaelbromley]

Ok, cheers. I'll look into it properly when I get some more time. For now just go with the work-around you mentioned, and I'll update this issue when I have anything new on it.

[brandonburkett]

I am running into this issue as well. For pagination-id should we use strings or scope variables? It seems {{ someVar }} does not work.

[michaelbromley]

Sorry guys, I was being a bit thick and my unit tests were not actually testing what I thought they were. Just ran into the same issue on my own project today, so I've fixed it now. Will push out a new bower/npm release shortly.