There is an issue when an ion-infinite-scroll is added to a panel that has two ion-scroll/ion-content panels. In my application, I have a dual pane UI with a list on the left side, and a detail view on the right side. Both are scrollable, but only the list on the left side uses infinite scroll.
Now, even if the infinite scroll component is added within the left list content, it still works with the right panel as the scroll view (see source code bellow). If I invert the 2 panels (right first, then left list), then it works properly. It seems that the infinite scroll picks up the last scroll view in the parent. When debugging the ionic source code, the scrollCtrl variable in ionInfiniteScroll.Link method always refers to the second panel. This seems to be due to to the way angular searches controllers using
Note that this StackOverflow seems to be related: http://stackoverflow.com/questions/35140875/multiple-ion-scroll-both-with-infinite-scroll, although the problem is a bit different.
Bellow is mycode, simplified:
<ion-view view-title="Documents"> ... <ion-content class="list-content col col-33"> <ion-refresher pulling-text="Pull to refresh..." on-refresh="entries.reload()"></ion-refresher> <ion-list class='list-entries'> <ion-item ng-repeat="item in entries.getEntries()" class="list-item item-list-entries" ng-click="entries.selectItem(item); entries.readEntry()"> ... </ion-item> </ion-list> <ion-infinite-scroll ng-if="infiniteScroll && entries.hasMore()" on-infinite="entries.loadMore()" distance="5%"></ion-infinite-scroll> </ion-content> <ion-content class="col col-offset-33 col-67"> .. WHATEVER ... </ion-content> </div> </ion-view>