javascript - Ionic list infinite scroll issue with assync request - Stack Overflow

admin管理员组

文章数量:1389817

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.

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.

• javascript
• angularjs
• scrollview
• ionic-framework

Share Improve this question Follow asked Oct 12, 2014 at 16:51 redromredrom 11.6k3434 gold badges166166 silver badges269269 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 plete 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

本文标签： javascriptIonic list infinite scroll issue with assync requestStack Overflow