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

【问题标题】：Calling function when scrolled element is fully visible in Angular ngRepeat当滚动元素在Angular ngRepeat中完全可见时调用函数
【发布时间】：2016-04-07 02:05:22
【问题描述】：

我有一个具有如下滚动视图的 Ionic 应用程序：

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

【问题讨论】：

您尝试编写指令了吗？您可以在内部使用 jslite 并尝试其他 SO 问题中给出的解决方案。
@Roy - 尝试但无法获得指令工作...查看更新的问题...谢谢。

标签： javascript html css angularjs ionic-framework

【解决方案1】：

试试 ngInfiniteScroll，一旦窗口到达当前集合的“末尾”，您就可以加载任何数据，我认为它也可以在底部或顶部。 https://sroze.github.io/ngInfiniteScroll/

【讨论】：