当我不断刷新我的angularJS页面时,内容有时显示,有时不显示

When I keep refreshing my angularJS page, the content sometimes shows up, sometimes doesn't

本文关键字:显示 内容有 angularJS 刷新 我的      更新时间:2023-09-26

我有一个运行angularJS的页面。有时,当我打开文档时,需要显示的数据只是有时才显示出来。当我不断尝试刷新页面时,它几乎是随机的:有时出现内容,有时没有。

运行这段代码的部分如下所示:

                <div class="row">
                    <div class="col-md-12" ng-repeat="(observer,hosts2) in bugDuration">
                        {{observer}}
                        <div class="row">
                            <div class="col-md-3" ng-repeat="(host, bugs2) in hosts2"> {{host}} 
                                <div ng-repeat="(bug, duration) in bugs2">
                                    {{bug}} for {{duration}} seconds.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
如您所见,它正在使用ng-repeat,我最好的猜测是,当这段代码运行时,ng-repeat对象(如bugDuration)是空的,因此它没有运行。

初始化所有这些变量的脚本位于文档的后面。我是否应该在控制器中做些什么以便每次都能刷新变量并显示内容?


编辑

下面是初始化bugDuration的代码:

 bugDuration = {};
                    bugTracker = {};
                    $.getJSON('../java_output/bugs.json', function (data) {
                        for ( var observer in data ) {
                            bugDuration[observer] = {};
                            for (var host in data[observer]) {
                                bugDuration[observer][host] = {};
                                for (var bug in data[observer][host]) {
                                    bugDuration[observer][host][bug] = data[observer][host][bug].duration;    
                                }
                            }
                        }
                        console.log (bugDuration);
                    });

                    $.getJSON('../java_output/bug_summary.json', function (data) {
                        var numObservers = data.numObservers;
                        delete data['numObservers'];
                        JSONbugsList = data;
                        var bugTracker = {};
                        for (var observer = 1; observer <= numObservers; observer++) {
                            observers.push(observer);
                            observerKeys = Object.keys(data);
                            // observerKeys.splice(observerKeys.indexOf('numObservers'));
                            for (var host in data["observer" + observer]) {
                                if (hosts.indexOf(host) == -1) {
                                    hosts.push(host);
                                }
                                hostKeys = Object.keys(data["observer" + observer]);
                                for (var bug in data["observer" + observer][host]) {
                                    if (bugs.indexOf(bug) == -1) {
                                        bugs.push(bug);  
                                    }
                                    for (var i in  data["observer" + observer][host][bug]) { 
                                        bugTracker[bug] = true;
                                        var dateVar = data["observer" + observer][host][bug][i];
                                        var intoList = {"observer":observer, "host":host, "bug":bug, "start":(new Date(1000*dateVar.start)), "end":(dateVar.end==null?' the end.':(new Date(1000*dateVar.end)))} 
                                        }
                                }
                            }
                        }

                       // Removed unimportant stuff here//

                        $scope.$apply();
                        $scope.hostsS = hosts;
                        $scope.bugsS = bugs;
                        $scope.observersS = observers;
                        $scope.JSONbugsList = JSONbugsList;
                        $scope.hostKeys = hostKeys;
                        $scope.observerKeys = observerKeys; 
                        $scope.start = 'start';
                        $scope.end = 'end';
                        $scope.bugDuration = bugDuration;
                        $scope.$apply();

其中最大的问题是$scope.$apply()需要在$scope上设置数据之后发生。因为美元。getJSON是异步的,当回调被触发时,底部的$scope.$apply()行将已经被触发。

$.getJSON('../java_output/bug_summary.json', function (data) {
  /*do stuff outside of angular context when the ASYNC callback fires*/
  $scope.stuff = data;
  /*then call $scope.$apply()*/
  $scope.$apply();
});