離子/角指令結合滾動

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