离子/角度指令绑定到滚动

Ionic / angular directive bind to scroll

本文关键字：绑定 滚动 指令 离子      更新时间：2023-11-28

我有这个滚动的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在触发控制台注释。上下滚动列表不会触发它。为什么不呢？

您正在滚动到具有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

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.');
        })
      }
    }
})
相关文章：