javascripthtmlangularjspaginationdirpagination

Data binding in templateCache for dir-pagination-control is broken in IE


We've used the following directive for pagination in our angular application. https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

While using 'dir-pagination-conrol' the pageNumber is not extrapolated to its value, instead {{ pageNumber }} is itself getting displayed in UI only in IE.

enter image description here

I've tried using dir-pagination-control both as element and attribute since the author has mentioned in lots of places that we should use it as attribute.

dir-pagination-controls direction-links="true" max-size="5"> /dir-pagination-controls> div dir-pagination-controls={ direction-links:true, max-size:5}> /div>

I'm actually loading the pagination result as an iframe in a Microsoft SharePoint modal dialog - SP.UI.ModalDialog.

https://msdn.microsoft.com/en-us/library/office/ff410058(v=office.14).aspx

The above behaviour - {{pageNumber}} being displayed, happens only if I use SP.UI.ModalDialog. If i instead do this : window.parent.location = 'some url' to display the pagination result, then the data binding happens correctly and appropriate page numbers are displayed.

From code - dirPagination.js:

$templateCache.put('angularUtils.directives.dirPagination.template', 'ul class="pagination" ng-if="1 < pages.length"> « ‹ {{1+1}} › » /ul');

This is where the template for dirPaginationControls is set. I think the expression is not evaluated for some reason. I even tried to change it to some thing like {{1+1}} to check if it evaluates to 2, instead {{1+1}} only is being displayed.

So I feel the data binding in templateCache isn't working if we are loading it using SP.UI.ModalDialog. Is there any other way we can do data binding other than {{ }} to evaluate and display the result or I am missing out on anything?

Any suggestion/feedback is very much appreciated. Thanks :)


Solution

  • The problem seemed to be with Microsoft SharePoint modal dialog - SP.UI.ModalDialog itself. So I changed my code to use a normal Javascript popup window and it worked.