Ionic list infinite scroll issue with assync request

Question

I have a problem with Ionic list filled by assync request.

In HTML I have following:

<ion-list class="list" ng-init="setDateRange('today');" >
          <!--IF NO ITEM IS FOUND -->
          <ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null">
              <h2>No data found, try to make few calls</h2>
          </ion-item>

          <ion-item class="item" ng-repeat="listDataItem in listData">
          <!--HTML CONTENT OF ITEM REMOVED FROM EXAMPLE -->
          </ion-item>

          <ion-infinite-scroll
                  icon="ion-loading-c"
                  distance="10%"
                  on-infinite="setDateRange('past')">
          </ion-infinite-scroll>
 </ion-list>

In ng-init is called method setDateRange method which is triggering assync request in separated method on the database.

I think, that problem could be in implementation of the $broadcast methods scroll.infiniteScrollComplete in updateList and createList, which are following.

$scope.updateList = function() {
            console.log('Trying to update list');
            $timeout(function() {
                $scope.$apply(function() {
                    listData.forEach(function(item){
                        $scope.listData.push(item);
                        console.log("List length is "+ $scope.listData.length);
                    });
                    $ionicLoading.hide();
                });
                $scope.$broadcast('scroll.infiniteScrollComplete'); // should be removed in production
                $scope.$broadcast('scroll.resize');
            });
        };

        $scope.createList = function() {
            console.log('Trying to render list');
            alert("render");
            $timeout(function() {
                $scope.$apply(function() {
                    $scope.listData = listData;
                    console.log("List length is "+ $scope.listData.length);
                });
                // Infinite scroll broadcast should be here to avoid
                // triggering of the on-infinite event
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });
            $ionicLoading.hide();
        };

Because during the ng-init is also triggered method updateList which cannot be done because $scope.listData does not exist at this moment.

Could somebody tell me how to implement

$scope.$broadcast('scroll.infiniteScrollComplete') 

and

 $scope.$broadcast('scroll.resize');

In right way?

Thanks for any help.

Answer 1

Here are a few notes, and a link to a demo at the bottom to show a full implementation. It is a little hard to tell without the complete code to test and see if there are other bottlenecks.

• I wouldn't use ng-init and just call that in your controller. Then you know exactly when it happens.
• You can initialize your model by setting a variable in your controller $scope.listData = []; .
• You shouldn't have to broadcast the scroll.resize event. You should place your ionList inside of ionContent or ionScroll .
• Putting the class="item" on <ion-item> is not necessary, it is automatically added.
• You will want to add an ng-if to your infinite scroll, so it knows when to stop loading more data (see example below).
• You should avoid using $scope.apply() always, and in this case you don't need it anyways.

Here is a codepen I made recently with a good example of using the infiniteScroll, it may help you understand how to use it well. http://codepen.io/gnomeontherun/pen/HJkCj