How to use nanoScroller with angular js

Question

I have a problem with nanoScroller. I am using Angularjs on the porject.I've a directive where I want to call the nanoScroller. It looks like this:

  <a ng-click='show-me'>Show Me</a>
  <div class='nano' ng-show='show-me' style='height:100px'>
   <ol class='nano-content'>
     <li ng-repeat='post in posts'>
       {{post.title}}
     </li>
   </ol>
  </div>

I need that .nano element has the scroller. When I press show-me, div opens which has a height of 100px. I also make a call of nanoScroller in this directive: angular.element(".nano").nanoScroller() But scroll doesn't appear. Maybe this is related to the fact that nano elements are not present on the page yet and nanoScroller is already called for it? I tried to use nanoScroller directive but I get the following bug with it: when changing the height of the div with "This is item" content, scroll of the whole page moves up. This can be replicated by scrolling the page to the bottom and pressing Add item button several times.

Please help. Thanks.

Answer 1

Here's a Wrapper for nanoScrollerJS with AngularJS lifecycle integration.

https://github.com/maxaon/angular-nanoscroller

DEMO PLUNKER

Answer 2

You're going to have to call .nanoScroller() when you know the element is visible. I recommend wrapping it in a timeout so it will update when the DOM is updated, by adding the following to your Angular Controller methods that handle changes to posts (i.e. getPosts(), addPost(), etc)..

// refresh nanoscroller
setTimeout(function() {
  $(".nano").nanoScroller();
}, 250);

In your case, you'll also need to add it to your show-me method, unless show-me is a simple boolean, in which case you'll need to pop the setTimeout() into a $scope.$watch() block that watches for changes to show-me, something like this (again, in your Controller)..

$scope.$watch('show-me', function(newValue, oldValue) {
  if (newValue === true) {
    // refresh nanoscroller
    setTimeout(function() {
      $(".nano").nanoScroller();
    }, 250);
  }
});