0

In my Cordova-ionic mobile app, I am using ion-affix and ion-infinite-scroll for a list. Below the code;

<ion-scroll zooming="false" direction="y" style="width: 100%;height:500px">
        <ion-refresher
        pulling-text=“Pull To Refresh“
        on-refresh=“reloadData()”></ion-refresher>

        <div class="list" ng-repeat="thisitem in homeData.items_new">
            <div class="item item-divider item-energized text-center" ion-affix data-affix-within-parent-with-class="list">
                {{thisitem.Date}}
            </div>
            <div class="item item-text-wrap" ng-repeat="item_sub in thisitem.items">
                {{item_sub.Time}} - {{item_sub.FlightNo}}
            </div>
        </div>

     <ion-infinite-scroll ng-if="!homeData.noMoreItemsAvailable" on-infinite="home_load_flights()" distance="10%"></ion-infinite-scroll>

    </ion-scroll>

The infinite scroll works fine at first loading. But when I refresh(pull down to refresh) the infinite scroll not working. Also when I remove the item for ion-affix, it works fine. Please help me.

Tony
  • 85
  • 1
  • 13

1 Answers1

0

The problem is that the first infinite scroll event (triggered in first loading) has not yet completed.

You need to broadcast a scroll complete event in home_load_flights() function. Put the following at the end of home_load_flights() or inside the promise of your http request (more preferred).

$scope.$broadcast('scroll.infiniteScrollComplete');
reno
  • 33
  • 4
  • Hi, Reno. Thanks for reply. I did that already. But still errir – Tony Oct 12 '15 at 03:43
  • Debug to see if that line really runs each time your home_load_flights() function runs. It works fine in first loading means it can call the function. So the main place that could cause a problem is in the broadcast of event complete. – reno Oct 19 '15 at 09:43
  • Try to remove all the things related to ng-if="!homeData.noMoreItemsAvailable" and see if it works? – reno Oct 20 '15 at 07:59