Aufruf Funktion, wenn gescrollt Element in Angular vollständig sichtbar ist ngRepeat

Question

Ich habe eine ionische App, die eine Scroll-Ansicht wie folgt hat:

<div ng-repeat="post in posts" > 
    <div id="my-image-{{$index}}" is-visible><img src="post.img" /></div> 
</div> 

... und ich möchte eine Funktion jedes Mal ein neues Bild ausgelöst werden soll das aktive "voll sichtbare" Bild. (Nur wird voll fit.)

Ich dachte an von this SO question so etwas wie dies mit:

function isScrolledIntoView(el) { 
     var elemTop = el.getBoundingClientRect().top; 
     var elemBottom = el.getBoundingClientRect().bottom; 

     var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 
     return isVisible; 
    } 

Aber wie bekomme ich die ID der divs die Bilder umgibt? Oder gibt es einen besseren Weg, dies ohne jQuery zu erreichen?

UPDATE: Versucht diese Direktive ... aber nichts in der Konsole zu bekommen.

.directive('isVisible', function(){ 
    return{ 
    restrict: 'AE', 
    link: function($scope, $element,$attr){ 
     var elemTop = $element.getBoundingClientRect().top; 
     var elemBottom = $element.getBoundingClientRect().bottom; 
     var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 
     console.log($element); 
     console.log("VISIBLE: " + isVisible); 
     return isVisible; 
    } 
    } 
}) 

Answer 1

Versuchen ngInfiniteScroll, können Sie alle Daten laden, wenn das Fenster das „Ende“ der aktuellen Kollektion erreicht hat, kann es auf dem Botton sein oder die Spitze zu denke ich. https://sroze.github.io/ngInfiniteScroll/