スクロール要素は、角ngRepeatに

Question

完全に表示されているときに関数を呼び出すと、私はこのようなスクロールビュー持つイオンのアプリがあります。

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

を...と私は機能に新しいイメージがあるたびにトリガーしますアクティブな「完全に可視」の画像。 （一つだけだろう完全にフィット。）

私はthis SO questionからこのようなものを使用して考えた：

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

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

しかし、どのように私は、画像を囲むdiv要素のIDを取得するのですか？または、jQueryを使用せずにこれを実現するより良い方法はありますか？

更新： このディレクティブを試してみましたが、コンソールには何も表示されません。

.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

ngInfiniteScrollを試してみてください、あなたはウィンドウが現在のコレクションの「終わり」に達した後、それはあまりにも私が思うボタンまたは上にすることができ、任意のデータを読み込むことができます。 https://sroze.github.io/ngInfiniteScroll/