Question

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

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

...我希望每次新图像处于活动状态时都会触发一个功能＆＃34;完全可见＆＃34;图片。（只有一个完全适合。）

我在考虑使用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，你可以在窗口到达当前集合的“结束”时加载任何数据，它也可以在botton或top上。 https://sroze.github.io/ngInfiniteScroll/

滚动元素在Angular ngRepeat

1 个答案: