[Resolved] Issue Beta.14: ion-infinite-scroll keep on calling the method of on-infinite

I just created a new project with sidemenu, and I created the a listview using ion-infinity-scroll. When move to the page position within distance 1%, the on-infinite method will be kept on calling and the list will not be appended any new item. ( I used the exactly same code with Beta 13, it was working )

In Html

  <ion-infinite-scroll
                ng-if="!noMoreItemsAvailable"
                on-infinite="loadMore(10)"
                distance="1%">
  </ion-infinite-scroll>

in Controller

.controller('FeedsCtrl', function ($scope,Feeds,$http,$ionicLoading) {
    $scope.feeds = [];
    $scope.loadedFeeds = Feeds.all();
    $scope.noMoreItemsAvailable = false;

    $scope.loadMore = function (NumOfFeedToLoad) {
        
        for(var i=0;i<NumOfFeedToLoad;i++){
            var numOffeeds = $scope.feeds.length;
            $scope.feeds.push($scope.loadedFeeds[numOffeeds]);
        }

        //Stop loadMore while no more data inside loadedFeeds
        if ($scope.feeds.length == $scope.loadedFeeds.length) {
            $scope.noMoreItemsAvailable = true;
        }

        $scope.$broadcast('scroll.infiniteScrollComplete');

    }

[Resolved]

Thanks for janober4h, his answer worked.

Had the same issue. Changed it to the following which fixed it:

$scope.$apply(function(){
    $scope.$broadcast('scroll.infiniteScrollComplete');
});

Facing the same issue here.

HTML

<div class="modal">
<ion-header-bar class="bar-header bar-dark">
    <ion-button class="button icon-left ion-chevron-left button-clear" ng-click="hideAllDrawsDialog()"></ion-button>
    <h1 class="title">{{ game }}: Select a draw date.</h1>
</ion-header-bar>
<ion-content>
    <div class="list list-inset">
        <label class="item item-input">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input type="text" placeholder="Search" ng-model="data.search">
        </label>
    </div>
    <ion-list>
        <ion-item ng-repeat="draw in ::allDraws | filter:data.queryInput | limitTo:itemsDisplayedInList track by draw.draw_number" ng-click="selectDraw({{draw}})" ng-tap="selectDraw({{draw}})">
            {{draw.display}}
        </ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="addMoreItems()" distance="10%"></ion-infinite-scroll>
</ion-content>

JS

        	$scope.noMoreItemsAvailable = false;
		$scope.itemsDisplayedInList = 20;
		$scope.addMoreItems = function() {
	      	if ($scope.itemsDisplayedInList >= processedData.length) {
		      $scope.noMoreItemsAvailable = true;
		    }
		    $scope.itemsDisplayedInList = $scope.itemsDisplayedInList + 20;
	      	$scope.$broadcast('scroll.infiniteScrollComplete');
	   };

The exact same code was working in beta 13 for me. (Except for the use of AngularJS 1.3 bind once natively. However I tried the same code without :: and it still didnā€™t work)

Thanks for all the work :)!

I have the same issue. Iā€™m able to work around it by changing

$scope.$broadcast('scroll.infiniteScrollComplete');

to

$scope.$digest();
$timeout(function() {
  $scope.$broadcast('scroll.infiniteScrollComplete');
});
3 Likes

Hi Mikemintz, thanks for your work around. I am gonna try it tonight.

If it is a bug of new version of Ionic, hopefully the team will see my post and fix it.

I get this same issue, your fix does not work though. I keep getting ā€œdigestā€ is already in progress errors.

If you get digest in progress errors, try this instead:

$timeout(function() {
  $timeout(function() {
    $scope.$broadcast('scroll.infiniteScrollComplete');
  });
});
1 Like

This doesnā€™t fix my issue, must be something in the ion-refresher for me

Had the same issue. Changed it to the following which fixed it:

$scope.$apply(function(){
    $scope.$broadcast('scroll.infiniteScrollComplete');
});
1 Like

janoberā€™s solution worked for me :)! Thanks!

However, it doesnā€™t work if I use the native bindonce (previously I used Pasvazā€™s bind once and it worked).

These doesnā€™t work:

        <ion-list>
        <ion-item ng-repeat="::draw in allDraws | filter:data.queryInput | limitTo:itemsDisplayedInList track by draw.draw_number" ng-click="selectDraw({{draw}})" ng-tap="selectDraw({{draw}})">
            {{draw.display}}
        </ion-item>
    </ion-list>

OR

    <ion-list>
        <ion-item ng-repeat="draw in allDraws | filter:data.queryInput | limitTo:itemsDisplayedInList track by draw.draw_number" ng-click="selectDraw({{draw}})" ng-tap="selectDraw({{draw}})">
            {{::draw.display}}
        </ion-item>
    </ion-list>

OR

        <ion-list>
        <ion-item ng-repeat="draw in ::allDraws | filter:data.queryInput | limitTo:itemsDisplayedInList track by draw.draw_number" ng-click="selectDraw({{draw}})" ng-tap="selectDraw({{draw}})">
            {{draw.display}}
        </ion-item>
    </ion-list>

This works (no use of ::):

        <ion-list>
        <ion-item ng-repeat="draw in allDraws | filter:data.queryInput | limitTo:itemsDisplayedInList track by draw.draw_number" ng-click="selectDraw({{draw}})" ng-tap="selectDraw({{draw}})">
            {{draw.display}}
        </ion-item>
    </ion-list>

Hey janober, your code works, thanks!

Is change ā€œ$scope.$broadcast(ā€˜scroll.infiniteScrollCompleteā€™);ā€ to ā€œ$scope.$apply(function(){ $scope.$broadcast(ā€˜scroll.infiniteScrollCompleteā€™); });ā€?
But it doesnā€™t work. The number of my listā€™s items is really changed, but they donā€™t show out.
Just like what you said: ā€œthe on-infinite method will be kept on calling and the list will not be appended any new itemā€.

I also tried this but the infinite-scroll-event is still triggered (infinite) multiple times! My code looks exactly the same like from kekijk. Are there any other solutions to fix this? Thanks!

Edit: Hereā€™s a pen to demonstrate it ā†’ http://codepen.io/anon/pen/GgrwdB

Hi Mastermind91,

I think you may need to add ng-if="!noMoreItemsAvailable" to your code, and add the noMoreItemsAvailable logic in your controller as well.

 <ion-infinite-scroll
                ng-if="!noMoreItemsAvailable"
                on-infinite="loadMore()"
                distance="1%">
 </ion-infinite-scroll>

Hmm, isnā€™t this flag only needed if there are really no new products left on the server?

I basically want to fetch new products from the server when the user scrolls down, update the list and when the user scrolls down to the bottom, load the next products (repeat this steps until really no products are left and THEN set noMoreItemsAvailable flag to true)

How was this issue resolved ? I canā€™t load more items when I use bind once but when I remove the bind once it works as expected

How I use this flag is that, letā€™s say I load 100 records from server, and only display 10 records on the list each time,
when I scroll more than 10 record on the list, then loadmore() triggered to load another 10 records from 11-20 out of the 100 record.
Once all 100 records are loaded to the list, then the flag stop the inifinite scroll, at the same time on the backend, I load another 100 recordsā€¦ and so forth.

Has this issue been resolved? Iā€™m using 0.14 beta bundle and I tried

$scope.$broadcast('scroll.infiniteScrollComplete');

as well as

$scope.apply(functio(){ $scope.$broadcast('scroll.infiniteScrollComplete'); });

But no dice

Also tried

console.log($scope.page);
	$timeout(function() {
  $timeout(function() {
  	$scope.$apply(function(){
	$scope.$broadcast('scroll.infiniteScrollComplete');
  	});
  });
});	

Still doesnā€™t work

Migt be a longshot here but could a ng-repeat-start and ng-repeat have anything to do with this bug?

For those who still have this bug, I believe Iā€™ve found a workaround. I figured this out when observing that, after triggering a cycle of infinite scroll, if I scrolled the scroll view, the infinite scrolling would stop. Iā€™m guessing this is a bug n beta14 of ionic where some information that the infinite scrolling is using isnā€™t being properly updated. That is to say, without explicitly scrolling the scroll view, it still thinks youā€™re currently scrolled to the bottom even though more content has been loaded. You can even see that the scroll indicator on the right continues to render as though no new content has been added to the view, at least not until you explicitly scroll the scroll view.

So hereā€™s the work around. Some time after calling:

$scope.$broadcast('scroll.infiniteScrollComplete');

Try calling:

$ionicScrollDelegate.$getByHandle('yourScrollDelegateHandleHere').scrollBy(0, 0);

However, the problem with the second call immediately following the first is that any momentum scrolling or bounce animation will be interrupted, and all scrolling will cease. So in order to get it to work, I introduced a delay between when a ā€œload moreā€ cycle concludes and when the infinite scrolling is allowed to happen again.

So in my html:

<ion-content delegate-handle="myScrollDelegateHandle">
    ...
    <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" on-infinite="loadMore()"></ion-infinite-scroll>
</ion-content>

In my controller:

$scope.canInfiniteScroll = false;

SomeService.getInitialData(...).then(function(data)) {
    ....
    $scope.canInfiniteScroll = true;
});

$scope.loadMore = function () {
    $scope.canInfiniteScroll = false;
    $scope.$broadcast('scroll.infiniteScrollComplete');

    SomeService.getMoreData(...).then(function(data) {
        if (< more data to load >) {
            $timeout(function () {
                $ionicScrollDelegate.$getByHandle('myScrollDelegateHandle').scrollBy(0, 0);
                $scope.canInfiniteScroll = true;
            }, 1000);
        });
    }
}

$scope.moreDataCanBeLoaded = function () {
    return $scope.canInfiniteScroll;
};

That seems to do the trick. Scrolling animation is preserved, and the infinite scroll infinite loop is stopped. Hopefully this works for others too! And also hopefully this bug gets fixed in ionic beta 15 :slight_smile: