Angular：在砌体中使用 ngInclude 时无限滚动不起作用答案

【问题标题】：Angular: Infinite scroll not working when using ngInclude in masonryAngular：在砌体中使用 ngInclude 时无限滚动不起作用
【发布时间】：2015-10-04 20:01:10
【问题描述】：

我正在使用带有ngInfiniteScroll 和angular-masonry 的AngularJS。

我目前在 PHP 中有一些前端部分，但我正在尝试将所有内容迁移到 HTML+JS。

目前运行良好：

<div id="flagevent-container"
     infinite-scroll='getFlags()'
     infinite-scroll-disabled='loadingMore'
     infinite-scroll-distance='0'
     masonry="{'gutter': 10}" preserve-order load-images="false"
     item-selector=".flagevent">
  <div masonry-brick id="flagevent{{flagevent.id}}" class="flagevent"
       ng-repeat="flagevent in flagsInWall">
    <?php include "flagevent.inc.html"; ?>
  </div>
</div>

现在我想从 PHP 的 include 转移到 Angular 的 ng-include。我将在masonry-brick 级别插入：

<div id="flagevent-container"
     infinite-scroll='getFlags()'
     infinite-scroll-disabled='loadingMore'
     infinite-scroll-distance='0'
     masonry="{'gutter': 10}" preserve-order load-images="false"
     item-selector=".flagevent">
  <div masonry-brick id="flagevent{{flagevent.id}}" class="flagevent"
       ng-repeat="flagevent in flagsInWall"
       ng-include="'flagevent.inc.html'">
  </div>
</div>

但是无限滚动不起作用；方法getFlags() 在不滚动的情况下被重复调用，从而检索所有项目，并且一次加载所有元素。

发生了什么事？

【问题讨论】：

可能是因为您现在是在客户端加载内容，而不是从服务器发送，页面第一次加载无限滚动内容是空的，因此立即到达末尾并且调用 getFlags？
嗯听起来很合理......
如果所有的 getFlags 函数只是在 flagsInWall 变量中添加一些值，它应该只被调用一次。 ://
每次它调用一个返回多个对象的服务，这些对象被添加到flagsInWall，但应该只在接近滚动结束时触发，而不是一起进行所有调用

标签： javascript angularjs infinite-scroll masonry

【解决方案1】：

最好的选择是使用lodash 或Underscore throttle 函数并让infinite-scroll 调用原始函数的节流版本。像这样，在infinite-scroll 再次调用它之前，允许一些时间来生成内容并完成滚动，正如@toskv 所建议的那样：

$scope.throttled = _.throttle($scope.getFlags, 500, {'leading': true, 'trailing': false});

'leading' 和'trailing' 属性的意思是“如果函数在 500 毫秒之前被调用，则只监听对 getFlags() 的第一次调用，最后不要再调用一次”。

infinite-scroll 现在应该使用节流功能：

<div id="flagevent-container"
     infinite-scroll='throttled()'
     infinite-scroll-disabled='loadingMore'
     infinite-scroll-distance='0'
     masonry="{'gutter': 10}" preserve-order load-images="false"
     item-selector=".flagevent">
  <div masonry-brick id="flagevent{{flagevent.id}}" class="flagevent"
       ng-repeat="flagevent in flagsInWall"
       ng-include="'flagevent.inc.html'">
  </div>
</div>

500ms后的下一个调用会被执行，但此时ng-include加载的内容已经可以生成了。我想这需要针对每种情况进行调整。

【讨论】：