javascript - 当滚动元素在 Angular ngRepeat 中完全可见时调用函数

Question

我有一个 Ionic 应用程序，它具有如下 ScrollView :

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