Databases
StackOverflow2013
Postsdbo
POAngularJS NanoScroller after ng-repeat doesn't show
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS NanoScroller after ng-repeat doesn't show
    text
    copied!<p>I've been trough many posts on stackoverflow but I didn't manage to find the answer yet. I have a jQuery scrollbar plugin (nanoscroll), and I want it to update after a ng-repeat. As many posts here suggests, I've used a directive like this :</p> <pre><code>myApp.directive("postRender", function() { return function(scope, element, attrs) { jQuery('.nano').nanoScroller({preventPageScrolling: true}); } }); </code></pre> <p>and then I have something like :</p> <pre><code>&lt;div class="nano"&gt; &lt;!-- my scrollable area --&gt; &lt;div ng-controller="MyController"&gt; &lt;div ng-repeat="item in items" post-render&gt; ... &lt;/div&gt; &lt;/div&gt; Some content here... &lt;/div&gt; &lt;!-- my scrollable area --&gt; </code></pre> <p>The problem is that (I have no idea why), if the content is just a little bit bigger than the available size for the <code>.nano div</code> then the scrollbar doesn't show.</p> <p>I believe that AngularJS doesn't wait to insert the content after the controller before trying to update 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 hit F11 two times (full screen and back to normal mode), whithout any DOM modification, the scrollbar appears.</p> <p>Thanks, hilnius</p> <p><em><strong></em>__<em>_</em>_</strong> ANSWER</p> <p>Finally i found the solution. For those who wonder, it is necessary to use the $timeout service. Like that :</p> <pre><code>myApp.directive('postRender',['$timeout', function (timer) { return { link: function (scope, elem, attrs, ctrl) { timer(function () { jQuery('.nano').nanoScroller({preventPageScrolling: true}) } , 0); } } }]); </code></pre> <p>Altough I found a solution I'm still not aware of the issue that was there. I believe it's because the angular directive wasn't waiting for the DOM to be completely modified, maybe there were time concerns. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload