javascript - ionic /Angular Directive(指令)绑定(bind)到滚动

Question

我有这个滚动的 div:

<div class="list">
  <div class="item" ng-repeat="post in posts">
    <img src="post.img" is-visible/>
  </div>
</div>

这在一个指令中:

angular.element(window).on('DOMContentLoaded load resize scroll', function () {
  console.log("window change");
});

目标是检测滚动。问题是只有 load 和 resize 触发控制台注释。上下滚动列表不会触发它。为什么不呢？

Answer 1

您正在滚动到具有 ng-repeat 指令的特定 div，并且您在 window 上应用了滚动。在您滚动到窗口之前，它不会着火。

理想情况下，您应该将滚动事件设置为特定的，它将包装在 ng-repeat 元素上。这样就可以作为 posts 集合的滚动条容器。

标记

<div is-visible id="post-list" class="list" style="overflow-y:scroll;width: 400px;height: 120px;border: 1px solid gray;">
  <div id="post-{{$index}}" class="item card" ng-repeat="post in posts">
    Message: {{post.message}}
  </div>
</div>

指令

.directive('isVisible', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.on('scroll', function(){
           console.log('Scroll has been detected.');
        })
      }
    }
})

Plunkr