Multiple ion-infinite-scroll on the same view requires an additional data attribute to prevent inappropriately firing finishInfiniteScroll

ionic-v1
1

We have a scenario where we need multiple infinite lists on a single view. (Our implementation features a number of “tabs”, with each tab having its own infinite list).

This works great, except when it comes time to get more data for any given infinite list; after the data is retrieved, we send out the requisite broadcast, ie:

$scope.$broadcast(‘scroll.infiniteScrollComplete’);

However each infinite scroller on the view is listening to that broadcast, and is calling its own on finishInfiniteScroll method. When the other tabs have an empty result list (because they have not yet been activated), this infinite scroller associated with the list on those tabs is firing its onInfinite method, and is resulting in an undesirable data load for the other tabs.

A possible solution would be to add some attribute to the directive which would allow a more focused broadcast. Maybe a name, or delegate attribute:

<ion-infinite-scroll delegate ='tab1'  on-infinite="loadMore()" ng-if="canLoadMore()" distance="1%">

Then the broadcast code could be:

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

The implementation, within the $ionInfiniteScroll controller could be something like:

  $scope.$on('scroll.infiniteScrollComplete', function (evt, args) {
      if (!args || args == $element.attr('delegate')) finishInfiniteScroll();
  });
3 Likes
2

I don’t really understand the last part of your explanation. Can I please get some guidance on where should I implement $scope.on? Thank you.

3

We modified the ionic source code; specifically the $ionInfiniteScroll controller.

If you look at the source code for that controller, you’ll see the “$scope.$on(‘scroll.infiniteScrollComplete’…” call. We modified that with the code shown above.

Worked well for us.

4

Does your meaning the currently ionic could do this way?