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

Question

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

我目前在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()在没有滚动的情况下被重复调用，从而检索所有项目，并立即加载所有元素。

发生了什么？

Answer 1

最好的办法是使用lodash或下划线 throttle功能，让infinite-scroll调用原函数的节流版本。 就像那样，允许生成内容的一些时间并在infinite-scroll再次调用之前完成滚动，如@toskv所示：

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

属性'leading'和'trailing'意味着'只监听第一次调用getFlags()如果函数在500 ms之前被调用，并且最后不再调用它''。

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>

将执行500毫秒后的下一个调用，但到那时，已经可以生成由ng-include加载的内容。 我想这需要根据每种情况进行调整。