How to prevent ngInfiniteScroll from being triggered multiple times after the initial trigger?

Question

I am using ngInfiniteScroll to enable infinite scrolling on my website. It works partly as expected, once I scroll to the bottom of the page it calls the method I want it to call to show more posts, except that it keeps calling posts without end after it is triggered once. Does anybody know what could be causing this? This is what my code looks like where I am implementing ngInfiniteScroll, I don't know that this specific code will help much though. I suspect it is getting thrown off by code in another file.

<div style="height: 1px">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"> </post>
<div ng-if="items.feed.length == 0 && !initialLoad">
<div class="empty-message">Your feed is currently empty, visit the <a href="/#/users">Users</a> page     and find some more people to follow!</div>
</div>
<a infinite-scroll="nextPosts()" infinite-scroll-distance="1" href ng-click="nextPosts()"   class="show-more">Show more </a> 
</div>

Storyteller

Answer 1

Example
You can use the infinite-scroll-disabled directive of ngInfiniteScroll to tell it to NOT load data if a call is already in progress.

E.g.

<div infinite-scroll='loadMore()' infinite-scroll-disabled='busyLoadingData' infinite-scroll-distance='1'>
  <p ng-repeat='item in items'>Some data</p>
</div>

JS:

$scope.busyLoadingData = false;

$scope.loadMore = function () {
  if ($scope.busyLoadingData) return;
  $scope.busyLoadingData = true;

  // $http call to get next set of data
  // on the .success() callback do $scope.busyLoadingData = false;
}

Denticle

Thank you, I ended up figuring it out and this is exactly the solution that I implemented. Thank you! – Storyteller

infinite-scroll-distance stands for what ? – Bloomington

@HabibulHasan Read the docs github.com/orizens/ngx-infinite-scroll/tree/master/projects/… – Cytogenetics