AngularJS NanoScroller after ng-repeat does not show

Question

I came across a lot of posts in stackoverflow, but haven't found an answer yet. I have a jQuery scrollbar plugin (nanoscroll) and I want it to update after ng-repeat. Like many posts here, I used this directive:

myApp.directive("postRender", function() { return function(scope, element, attrs) { jQuery('.nano').nanoScroller({preventPageScrolling: true}); } }); 

and then I have something like:

 <div class="nano"> <!-- my scrollable area --> <div ng-controller="MyController"> <div ng-repeat="item in items" post-render> ... </div> </div> Some content here... </div> <!-- my scrollable area --> 

The problem is that (I have no idea why), if the content is slightly larger than the available size for the .nano div , then the scroll bar is not displayed.

I believe that AngularJS does not wait to insert content after the controller before trying to update the nanoscroller, and that this content is added after the posrt-render directive. By the way, I doubt that this problem comes from NanoScroller, because when I press F11 twice (full screen and back to normal mode), without any modifications to the DOM, a scroll bar appears.

Thanks hilnius

____ ANSWER

Finally, I found a solution. For those who are wondering, it is necessary to use the $ timeout service. For instance:

 myApp.directive('postRender',['$timeout', function (timer) { return { link: function (scope, elem, attrs, ctrl) { timer(function () { jQuery('.nano').nanoScroller({preventPageScrolling: true}) } , 0); } } }]); 

Although I found a solution, I am still not aware of the problem that was there. I believe because the angular directive did not expect a complete modification of the DOM, there may have been a time problem.

Answer 1

OP found a solution.

You must use the $ timeout service. Like this:

 myApp.directive('postRender',['$timeout', function (timer) { return { link: function (scope, elem, attrs, ctrl) { timer(function () { jQuery('.nano').nanoScroller({preventPageScrolling: true}) }, 0); } } }]);