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>

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>

• javascript
• html
• angularjs
• nginfinitescroll

1 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;
}