When calling $compile on a code containing dirPagination, registered pagination-id is not found

[nathan-mickler]

I'm dynamically pulling in HTML code and running it through $compile after adding it to my DOM and everything seems to be working except that I'm now getting the following error message: pagination directive: the itemsPerPage id argument (id: locations) does not match a registered pagination-id

It appears that the dir-paginate directive is getting compiled before the dir-pagination-controls directive and is therefore unable to find the registered pagination-id. How do I get around this?

[nathan-mickler]

Here is a simple plunkr demonstrating the problem.

The same data set is pulled in two times (on top: not working, and on bottom: working)

http://plnkr.co/edit/t7YNiM

[michaelbromley]

Hi,

The way the directive itself works involved dynamically calling $compile() after doing some manipulation - adding an ngRepeat directive etc. I can imagine there is some conflict arising perhaps to do with the order of execution of the calls to $compile.

In your plunk I do not see the error you reported above - I get uncaught Error: [$compile:ctreq] Controller 'ngInclude', required by directive 'ngInclude', can't be found!.

I can't say when I'll be able to put in some time to investigating this - I have limited free time to work on issues here at the moment. I will label it as a bug to fix though.

[nathan-mickler]

I may have accidentally updated that plunkr since then with other attempts
to get this working...I intended to create a new plunkr with updates. If
you find out another way I can inject the code dynamically, please let me
know.

Thanks.

On Tuesday, December 1, 2015, Michael Bromley notifications@github.com
wrote:

Hi,

The way the directive itself works involved dynamically calling $compile()
after doing some manipulation - adding an ngRepeat directive etc. I can
imagine there is some conflict arising perhaps to do with the order of
execution of the calls to $compile.

In your plunk I do not see the error you reported above - I get uncaught
Error: [$compile:ctreq] Controller 'ngInclude', required by directive
'ngInclude', can't be found!.

I can't say when I'll be able to put in some time to investigating this -
I have limited free time to work on issues here at the moment. I will label
it as a bug to fix though.

—
Reply to this email directly or view it on GitHub
#269 (comment)
.

[nathan-mickler]

I figured out a solution by editing dirPagination.js (see: http://plnkr.co/edit/KOzZGt)

If I modify line #236 as follows, then it works to dynamically inject the content.

var paginationId = scope.paginationId || attrs.paginationId || DEFAULT_ID;
...to...
var paginationId = attrs.paginationId || DEFAULT_ID;

Are there side effects that this will have that I'm nor aware of?

[michaelbromley]

Ok, thanks. Off the top of my head I can't say what the side effects may be. I suspect that there is a specific reason why I wrote it that way, but perhaps it covers a case you don't need. I'll run it through the test suite when I get time and see what happens.

Thanks for sharing your fix, that's very helpful in the mean time.

[michaelbromley]

Hi,

Finally got round to looking at this again. Making your suggested change and running through the tests, I get a failure of this test

dirPagination directive dynamic pagination ids should allow independent pagination FAILED
    Expected [ '1', '2', '3' ] to equal [ '4', '5' ].

So it's not viable for me to make that change in the source.

[hut8]

I believe this is causing a problem I'm having with using this package with angular-ui-router. I'm able to reproduce it like this:

• Hit a page with the pagination directive. It works fine.
• Navigate to a different angular-ui-router state which also contains the directive (without reloading the entire page)
• It breaks

I have limited time on this project so I can't look into a fix right now, sorry 😦 Any ideas what a change might be that could fix it?

[izabelavmelo]

We have the same problem in our project. We used more than 1 pagination in the same page, and this is being dynamically loaded (according to the number passed by the user).

The scope in "dirPaginationCompileFn" is not accessible. So, when the pagination-id is dynamically passed, it can't evaluate "$parse(attrs.paginationId)(scope)"