dirPagination: paged results not displaying within Bootstrap.UI tab component

[brettstedford]

I seem to be encountering a problem displaying the paged results when the results (i.e. rows in a table) are contained in the Bootstrap.UI tab component.

I've stepped through code to see what might be happening but a paged result collection does seem to be returned from the itemsPerPage filter when called for the pagination id concerned, just no results are actually rendered. The pager itself does render with the expected number of pages.

I don't get any script errors either suggesting I may have configured dirPagination incorrectly.

Also, the same markup / expression works fine outside of the component, so this leads me to believe it is the component causing some confusion.

Any ideas why this may be? I was hoping the paging would work within these tabs.

I'm fairly new to Angular, so apologies for my lack of knowledge.

[michaelbromley]

Hi,

I've no idea how the tab component might be interacting with the pagination code. Could you post the code or (even better) make a live example on Plunker? Then I'd be happy to take a look.

[tw1nk]

I have also encountered this issue when I had the dirPaginate directive as a child to a directive with transclude:true.

[brettstedford]

Hope this demonstrates the issue: http://plnkr.co/edit/iH3NFUZ0GMmCQvjwJb4S?p=preview

[michaelbromley]

@brettstedford84 thanks for that. I've spent a few hours this morning trying to figure this out. I'm pretty sure that the problem occurs because the dirPaginate directive is inside a directive that uses transclusion. It appears to be the same problem as raised in issue #28 (dir-paginate fails to properly update when used with ng-if).

I've not gotten to the bottom of this yet, I've been stepping through the Angular source for a while but it seems a pretty complex issue.

I'll carry on because I think it's a fairly common use-case to want to put dirPaginate inside a transcluding directive, so it's well worth solving.

Any bona-fide Angular experts are welcome to weigh in with advice here!

I wrote a question on StackOverflow hoping for some help with this: http://stackoverflow.com/questions/25424491/angularjs-why-does-this-delegated-ng-repeat-not-work-inside-a-transclusion

[michaelbromley]

Okay, after most of the day hacking away at the Angular source in devtools, I've fixed it! 716ac51

As far as I can tell, the problem was that when a directive uses transclusion (as does the ui-bootstrap tabs directive, as well as ng-if, ng-repeat and others), during the compile step, it detaches the contents from the DOM and makes a clone of it. Then, after some other stuff, it appends that clone back into the DOM in the correct place.

The trouble was that the dirPaginate directive would get compiled against the detached clone, so effectively the ng-repeated elements would be appended to a lost piece of DOM that would never appear on the page.

The solution was fairly simple: I moved the compilation of the dir-paginate's delegated ng-repeat into the linking function (rather that in the compile stage, where it was originally).

Here is a working example with ui-bootstrap tabs: http://plnkr.co/edit/aCnNeNWGeM60EnFeVj0K?p=preview