【发布时间】：2023-03-27 19:24:01
【问题描述】：
我有一个离子应用程序，设置了 3 个选项卡（Tab1、Tab2 Tab3）和一个离子列表，每个选项卡中都有离子项目，加载了不同的数据。
如果我最初打开任何一个选项卡（如从地址栏导航到它），它们每个都可以工作。但是，如果我在“主页”选项卡上并切换到“搜索”选项卡，则不会出现离子列表。同样，如果我从“搜索”选项卡开始并转到“主页”选项卡，则离子列表不会出现在“主页”选项卡中。
导航栏和标签栏确实出现了。它只是不显示离子含量。
DOM 实际上是用数据填充的。 ion-content 包含带有 ion-items 的 ion-list 以及我想要的 HTML 和数据。它们只是由于某种原因没有在视觉上出现（大小和宽度为 0 的元素就好像它们是空的一样）
如果我在桌面上调整 Safari 窗口的大小，内容会突然完美显示。
此外，如果我从一个选项卡开始，切换到另一个选项卡，然后再切换回来，内容也会完美显示。
只有在桌面上的 Safari 或 iOS 上的应用程序中进行测试时才会出现此问题。在 Chrome 和桌面上进行测试并在 Android 上运行该应用程序运行良好。
如果我对示例数据进行硬编码并将其添加到同一个数组中，那么 ng-repeat 会使用硬编码的数据正确显示在 DOM 中。只有在调整窗口大小或切换选项卡时才会显示其余数据。
其余数据正在使用 $http.get() 加载
简单的点击和滚动似乎没有任何作用。只有页面调整大小或切换选项卡才会显示 AJAX 加载的数据。
调用 $scope.$apply() 或 $scope.$digest 似乎没有做任何事情。
上面提到的故障排除和调试让我认为这是 Ionic 和/或 AngularJS 在渲染异步加载数据时的错误。我想知道是否有人对此有解决方案或解决方法。
相关代码：
控制器
angular.module('starter.PostListPlaceView', [])
.controller('PostListPlaceViewCtrl', function($scope, $http, PostFactory, Constants, $rootScope, $sce, linkify, SinglePostService, $stateParams, $timeout) {
function sendGetInitialPostsRequest(){
$http.get(Constants.GET_POSTS_URL, {params : paramObject})
.then(function (response){
$scope.posts = [];
for(var i = 0; i < response.data.resultsArray.length; i++){
var post = new PostFactory(response.data.resultsArray[i]);
console.log(post.desc);
}
$timeout(function() {
$scope.$digest();
console.log("$scope.$apply() called.");
}, 0);
$scope.$broadcast('scroll.refreshComplete');
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}
});
模板：
<ion-content>
<ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<div ng-repeat="post in posts track by $index">
<ion-item class="post wrap" >
<div class="post-desc" ng-bind="post.desc"></div>
</ion-item>
</div>
</ion-list>
<ion-infinite-scroll on-infinite="getPosts()" distance="1%" ng-if="moreResults &&!loading">
</ion-infinite-scroll>
</ion-content>
如上所述，此代码在桌面和 Android 上的 Chrome 中完美运行，因此我认为它不是我的代码本身的逻辑/语法错误。
【问题讨论】：