Ionic/Winkel Richtlinie binden blättern

Question

Ich habe dieses Scrollen div:

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

und dies in einer Richtlinie:

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

Das Ziel ist, blättern zu erkennen. Das Problem ist, dass nur load und resize den Konsolenkommentar auslösen. Wenn Sie die Liste auf- und abwärts scrollen, wird sie nicht ausgelöst. Warum nicht?

Answer 1

Du Scrollen auf bestimmte div die ng-repeat Richtlinie hat, & Sie blättern auf window angewendet hatte. Die würden nicht brennen, bis Sie zu Fenster scrollen.

Im Idealfall sollten Sie Scroll-Ereignis auf bestimmte, die Wrapper auf ng-repeat Element würde festlegen. So kann das als Rollbalken-Container für posts Sammlung dienen.

Markup

<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> 

Richtlinie

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

Plunkr

Answer 2

Der HTML-Code in einem <ion-content></ion-content> Block eingebettet ist, und das ist, was ... ist Scrollen so dass das, was ich brauche, um binden an:

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> 

RICHTLINIE

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