Ionic infinite scroll function invoked on page load

Question

I am using ionic framework to create a basic Feed app. I got the refresher going but I'm having trouble with my ion-infinite-scroll.

Feed.html

<ion-content ng-controller="FeedController" > 
    <ion-refresher pulling-text="Pull to refresh.." on-refresh="get_feeds()" refreshing-text="Fetching ..." refreshing-icon="ion-loading-b">
    </ion-refresher>
    <ion-list>
        <ion-item ng-repeat="question in questions">
            <div class="item item-divider">
{{question.question}}
            </div>
            <div class="item" ng-bind-html="question.answer | trustHtml">
            </div>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll
        on-infinite="get_more()"
        distance="1%">
    </ion-infinite-scroll>
</ion-content>

Feed.js

 (function(){
    "use strict";
    angular.module( 'app.controllers' ).controller( 'FeedController', 
        [ 'eTobb', 'Users', '$scope', '$timeout', function( eTobb, Users, $scope, $timeout) {

            var pageIndex = 1;

            $scope.questions = [];

            $scope.get_feeds = function(pageIndex){
                eTobb.get($scope.apiCall, { user_id: Users.id, page: 0 }, function(response) {
                    if ( response ){
                        $scope.questions = $scope.questions.concat(response);
                        console.log($scope.questions);
                    }
                })
                .finally(function(){
                    $scope.$broadcast('scroll.refreshComplete');
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };

            $scope.get_more = function(){
                $scope.get_feeds(pageIndex);
                pageIndex = pageIndex + 1; 
                console.log('why the hell am i being called?');
            };
        }
        ]);
})(); 

Issue

The method defined on the on-infinite property is called two times when the page loads and then is called normally (once) every time the bottom of the page is reached. Does anyone know why this happens?

Answer 1

I also ran into this issue, however using ng-if did not solve the problem, nor do I believe it to be the right way to solve this issue.

According to Ionic's documentation, you would only use ng-if to indicate that no further data is available, and to prevent the infinite scroller from making additional calls to the "get_more" method.

What I found to be the cause of this unexpected "get_more()" call during a page load was due to the infinite scroller thinking there was not enough content during the first load (ie: the initial load did not provide enough results to fill the page), and as such it immediately initiated another load request.

In my particular scenario, I had returned more than enough records to fill the page, however the infinite scroller was still requesting more. My list was mostly filled with images, and I think that the scroller was inappropriately calling the "get_more()" due to timing issues between when the images were loaded and when it checked to see if the page was filled.

In any case, the solution to my problem was to tell it to not perform an immediate bounds check on load; you do this with the immediate-check attribute, ie:

<ion-infinite-scroll immediate-check="false" on-infinite="vm.localDataManager.getData()" ng-if="vm.localDataManager.canGetData()" distance="1%">

Answer 2

RMD's answer solved the issue for me on a computer, but when running my app on Android my vm.loadMore() function was called immediately even though immediate-check="false" was set on my ion-infinite-scroll element. I solved it by adding a helper variable vm.initialSearchCompleted = false; to the controller, and to my ion-infinite-scroll element like this:

<ion-infinite-scroll
  on-infinite="vm.loadMore()"
  distance="1%"
  immediate-check="false"
  ng-if="vm.canLoadMoreResults && vm.initialSearchCompleted">
</ion-infinite-scroll>

When the initial call to my vm.search() function was completed, I set vm.initialSearchCompleted = true;. That solved the problem.

Answer 3

You can use ng-if on ion-infinite-scroll, so when there is no data, the handler of on-infinite will not be called.

<ion-infinite-scroll
        on-infinite="get_more()"
        distance="1%"
        ng-if="questions.length">
 </ion-infinite-scroll>