Угловой: Бесконечный свиток не работает при использовании 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> 

Теперь я хочу, чтобы перейти от РНР include к Угловое-х 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 или Underscorethrottle функцию и пусть infinite-scroll вызов задушил версия исходной функции. Как, что, некоторое время разрешено для содержимого будет сгенерировано и выполнять прокрутку, прежде чем infinite-scroll называет его снова, как это было предложено @toskv:

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

Атрибуты 'leading' и 'trailing' означает «слушать только при первом обращении к getFlags() если функция вызывается до 500 мс и не называет ее еще раз в конце '.

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 уже могут быть сгенерированы. Думаю, это нужно подстраивать под каждый случай.