1

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

请帮忙。谢谢。

4

2 回答 2

2

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

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

在您的情况下，您还需要将其添加到您的show-me方法中，除非是一个简单的布尔值，在这种show-me情况下，您需要将)..setTimeout()$scope.$watch()show-me

$scope.$watch('show-me', function(newValue, oldValue) {
  if (newValue === true) {
    // refresh nanoscroller
    setTimeout(function() {
      $(".nano").nanoScroller();
    }, 250);
  }
});
于 2015-06-29T14:34:50.920 回答
0

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

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

演示柱塞

于 2016-05-09T06:54:57.563 回答