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>上，系统会自动添加。{/ li>
您需要在无限卷轴中添加ng-if，以便知道何时停止加载更多数据（请参阅下面的示例）。
您应该始终避免使用$scope.apply()，在这种情况下，您无论如何都不需要它。

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

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

1 个答案: