javascript - 如何在 Angular js中使用nanoScroller

Question

我对 nanoScroller 有疑问.我在项目上使用 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 时，会打开高度为 100px 的 div。我还在这个指令中调用了 nanoScroller:angular.element(".nano").nanoScroller() 但是滚动没有出现。 也许这与页面上尚未出现 nano 元素并且已经调用 nanoScroller 的事实有关？ 我尝试使用 nanoScroller directive但我得到以下 bug用它:当用“This is item”内容改变div的高度时，整个页面的滚动向上移动。这可以通过将页面滚动到底部并多次按添加​​项目按钮来复制。

请帮忙。 谢谢。

Answer 1

当您知道该元素可见时，您将不得不调用 .nanoScroller()。我建议将它包装在超时中，以便它会在 DOM 更新时更新，方法是将以下内容添加到处理帖子更改的 Angular Controller 方法中(即 getPosts()、addPost() 等)..

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

在您的情况下，您还需要将它添加到您的 show-me 方法中，除非 show-me 是一个简单的 bool 值，在这种情况下您您需要将 setTimeout() 弹出到 $scope.$watch() 中监视 show-me 变化的 block ，像这样(同样在你的 Controller 中)..

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