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或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>

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

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

1 个答案: