带有assync请求的离子列表无限滚动问题

Question

我遇到了由assync请求填充的离子列表的问题.

在HTML中我有以下内容:

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

在ng-init中调用方法setDateRange方法,该方法在数据库的分离方法中触发assync请求.

我认为,这个问题可能是在updateList和createList中实现$ broadcast方法scroll.infiniteScrollComplete,后面是这些.

$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();
        };

因为在ng-init期间也触发了方法updateList,因为此时$ scope.listData不存在而无法完成.

有人可以告诉我如何实施

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

和

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

以正确的方式？

谢谢你的帮助.

Answer 1

以下是一些注释,以及底部演示的链接,以显示完整的实现.没有完整的代码来测试并查看是否存在其他瓶颈,这有点难以辨别.

• 我不会使用ng-init,只是在你的控制器中调用它.然后你确切知道它何时发生.
• 您可以通过在控制器中设置变量来初始化模型$scope.listData = [];.
• 您不应该播放该scroll.resize活动.你应该把你的ionList内部ionContent或ionScroll.
• 把class="item"上<ion-item>是没有必要的,它会自动添加.
• 您将需要添加ng-if到无限滚动,因此它知道何时停止加载更多数据(请参阅下面的示例).
• 你应该$scope.apply()总是避免使用,在这种情况下你无论如何都不需要它.

这是我最近编写的一个使用infiniteScroll的好例子,它可以帮助您理解如何使用它.http://codepen.io/gnomeontherun/pen/HJkCj