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

您正在滚动到具有div指令的特定ng-repeat，＆amp;你在window上应用了滚动。在你滚动到窗口之前不会起火。

理想情况下，您应该将scroll事件设置为特定的，这将包装在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

Answer 2

HTML嵌入在<ion-content></ion-content>块中，这就是滚动...这就是我需要绑定的内容：

HTML

<ion-content id="my-content">
  <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>
</ion-content>

指令

.directive('isVisible', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var parent = angular.element(document.querySelector('#my-content'));
        parent.on('scroll', function(){
           console.log('Scroll has been detected.');
        })
      }
    }
})

Ionic / angular指令绑定到滚动

2 个答案: