我有一个由异步请求填充的离子列表的问题。
在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方法，该方法在数据库上的单独方法中触发异步请求。
我认为，该问题可能是在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');
以正确的方式？
谢谢你的帮助。
这里有一些注意事项，并在底部提供了一个演示链接，以显示完整的实现。如果没有完整的代码来测试并查看是否还有其他瓶颈，很难说出来。
ng-init，只是在您的控制器中调用它。然后，您确切地知道它何时发生。$scope.listData = [];。scroll.resize事件。您应该将自己ionList放在ionContent或中ionScroll。class="item"上<ion-item>是没有必要的，它会自动添加。ng-if在无限滚动中添加一个，以便它知道何时停止加载更多数据（请参见下面的示例）。$scope.apply()始终使用，在这种情况下，无论如何您都不需要它。这是我最近制作的一个Codepen，上面有一个使用infiniteScroll的好例子，它可以帮助您了解如何很好地使用它。http://codepen.io/gnomeontherun/pen/HJkCj
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句