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

1

So, how can I stop the infinite-scroll after a state change?

How to reproduce

  1. Open the Codepen.
  2. Open your DevTools and check the logs.
  3. Scroll down the user’s list and when you see the infinite-scroll’s spinner tap/click one of the users.
  4. Check the logs, every three seconds the function $scope.loadMoreData is called.

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

The loop starts when I navigate to other state before the ionic.infiniteScrollComplete broadcast, in other words, when the infinite-scroll is waiting for the broadcast $scope.loadMoreData

I tried it.

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

I also tried to execute it with $ionicView.beforeLeave, $ionicView.leave events, or defining inside these events a variable to stop infinite-scroll with ng-if like


    $scope.$on('$ionicView.leave', function () {
      $scope.$apply(function () {
        $scope.stopInfiniteScroll = true;
      });
    });

but it could not fix the problem.

I’m using v1.0.0-rc.1-nightly-1152 right now, I’ll make a codepen.

2 Likes
2

One workarround would be to prevent users from changing state until data is loaded.
Check here: http://codepen.io/anon/pen/JoxXXo

$rootScope.isFinishedLoading is true only when the data is loaded (or error occured);

You can try something similar, like broadcast the infinite-scroll completed event on state change from $rootScope.

3

Hi, I am now using this widget, but once the data became more and more, the ion-list can’t work fine, and my mobile looks like crash.Can you give me some advise?

Thanks

4

I think it’s a good hack @vicmota but it doesn’t resolve the problem in my case (I am using multiple lists with the infinite-scroll distributed in a complex navigation - a tabs and a sidebar menu). Is there a way to reset the ion-infinite-scroll directive on state change?