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


#1

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');
});

[Resolved by Myself] Ion-infinite-scroll keep on calling the method of on-infinite
Beta 14 Bug in ion-infinitie
#2

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 :)!


#3

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');
});

#4

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.


#5

I get this same issue, your fix does not work though. I keep getting “digest” is already in progress errors.


#6

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

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

Infinite scroll keeps firing in inactive tab
#7

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


#8

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

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

#9

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>

#10

Hey janober, your code works, thanks!


#11

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


`ion-infinite-scroll` is looping after state change before infiniteScrollComplete
#12

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


Infinite Scroll Not Stopping
#13

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>

#14

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)


#15

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


#16

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.


#17

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


#18

Also tried

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

Still doesn’t work


#19

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


#20

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: