Question

我遇到nanoScroller的问题。我在porject上使用Angularjs。我有一个指令，我想调用nanoScroller。它看起来像这样：

  <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>

我需要.nano元素具有滚动条。当我按show-me时，div打开，其高度为100px。我还在这个指令中调用了nanoScroller：angular.element(".nano").nanoScroller() 但滚动没有出现。也许这与纳米元素在页面上不存在并且nanoScroller已经被称为它的事实有关？我尝试使用nanoScroller directive，但我得到了以下bug：当使用“This is item”内容更改div的高度时，整个页面的滚动向上移动。这可以通过将页面滚动到底部并多次按“添加项目”按钮来复制。

请帮忙。感谢。

Answer 1

当您知道该元素可见时，您将不得不致电.nanoScroller()。我建议将其包装在超时中，以便在更新DOM时更新，通过将以下内容添加到处理帖子更改的Angular Controller方法（即getPosts()，addPost()等）。 / p>

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

在您的情况下，您还需要将其添加到show-me方法，除非show-me是一个简单的布尔值，在这种情况下，您需要弹出setTimeout()进入监视show-me更改的$scope.$watch()块，类似这样（再次，在您的控制器中）..

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

Answer 2

这是一个带有AngularJS生命周期集成的nanoScrollerJS包装器。

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

DEMO PLUNKER

如何使用带角度js的nanoScroller

2 个答案: