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.

score 2 · Answer 1 · edited Oct 16 '15 at 05:53

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);
  }
});

edited Oct 16 '15 at 05:53

Andrew

12,991
15
55
85

answered Jun 29 '15 at 14:34

Darwayne

1,400
14
14

1

I would recommend using the Angular $timeout here instead of the vanilla JS version. – Stone Oct 27 '15 at 21:51
I disagree, $timeout causes an extra digest cycle, in my example scope variables are not being modified. – Darwayne Oct 29 '15 at 11:37
I should have clarified why I suggested $timeout. It provides a promise, which I find very useful. You are correct though, if you're looking to save digest cycles and you don't need a promise, use setTimeout. In my experience on a team it's easier or us all to just use $timeout, then we can all expect a promise. – Stone Oct 30 '15 at 22:57

score 0 · Answer 2 · answered May 09 '16 at 06:54

0

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

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

DEMO PLUNKER

answered May 09 '16 at 06:54

Manas

808
1
7
16

How to use nanoScroller with angular js

2 Answers2