Javascript 角度：在砌体中使用ngInclude时，无限滚动不起作用

我将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>

但是无限卷轴不起作用；方法

getFlags（）

在不滚动的情况下被重复调用，从而检索所有项，并立即加载所有元素

---

发生了什么？

最好的选择是使用或

节流

函数，让

无限滚动

调用原始函数的节流版本。这样，在

infinite scroll

再次调用它之前，允许有一段时间生成内容并完成滚动，正如@toskv所建议的：

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

属性

'leading'

和

'training'

表示“如果函数在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毫秒后的下一次调用将被执行，但到那时，

ng include

加载的内容已经可以生成。我想这需要根据每个情况进行调整。

可能是因为您现在在客户端加载内容，而不是从服务器发送内容，页面第一次加载无限滚动内容时为空，因此立即到达结尾并调用getFlags？Hmmm听起来很合理…但是如果getFlags函数所做的只是在flagsInWall变量中添加一些值，则只应调用一次：/每次调用一个服务时，它都会返回一些对象，这些对象被添加到

flagsInWall

，但应该只在接近滚动的末尾时触发，而不是同时执行所有调用

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