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?

"console.log('why the hell am i being called?');" I wondered the same Jajajajajaja — NHTorres, Jun 26 '15 at 18:01

score 53 · Accepted Answer · answered Mar 30 '15 at 02:13

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%">

Great explanation! I knew the problem was something like that but I couldn't manage to find a solution, and your solution makes more sense than using an ng-if :D — Jad Salhani, Apr 07 '15 at 11:46
Thank you very much. I think this should actually be built into the directive as a default setting by Ionic.. — Winterain, Nov 13 '15 at 06:26
My issue is that ng-if is not orking well, the scope variable 'moredata' is always true, but infinite scroll never perform the call when placed at the end of he list. If I remove ng-if, it works fine but is always active. Do not know what's happening. — domoindal, Jun 30 '16 at 16:42

score 5 · Answer 2 · answered Jan 21 '16 at 11:33

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.

1

bingo, this nailed it – achabacha322 Jun 10 '16 at 04:08

score 4 · Answer 3 · answered Jan 14 '15 at 15:22

4

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>

answered Jan 14 '15 at 15:22

Shripal Soni

2,448
17
15

This is what I had to do. – D.Hodges Aug 17 '20 at 18:12

score 0 · Answer 4 · edited Sep 02 '16 at 08:41

0

The answer of 'Ionic infinite scroll function invoked on page load' is immediate-check="false" on ion-infinite-scroll

edited Sep 02 '16 at 08:41

e382df99a7950919789725ceeec126

5,751
4
31
56

answered Dec 18 '15 at 10:42

Téwa

1,184
2
13
19

it should be in comment of his answer – Enamul Hassan Dec 18 '15 at 11:02

Ionic infinite scroll function invoked on page load

Feed.html

Feed.js

Issue

4 Answers4