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

Question

我正在使用 AngularJS 和 ngInfiniteScroll and 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 or Underscore throttle 函数并让 infinite-scroll 调用原始函数的节流版本。像这样，在 infinite-scroll 再次调用它之前，需要一些时间来生成内容并完成滚动，正如@toskv 所建议的：

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

属性 'leading' 和 'trailing' 表示 'listen only to the first call to getFlags() if the function is called before 500 ms, and do not call it one more time in the end'。

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加载的内容了。我想这需要根据具体情况进行调整。

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

Angular: Infinite scroll not working when using ngInclude in masonry

javascript

infinite-scroll

angularjs

masonry