离子/角指令结合滚动

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指令，&您已应用滚动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

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

.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.'); 
     }) 
     } 
    } 
})