javascript - 当我不断刷新 angularJS 页面时，内容有时显示，有时不显示

Question

我有一个运行 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 是空的，所以没有一个运行。

初始化所有这些变量的脚本位于我的文档中。我是否应该在 Controller 或其他什么中做一些事情，以便可以刷新变量并且每次都可以显示内容？

<小时/>

编辑

<小时/>

这是初始化 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();

Answer 1

其中最大的问题是 $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();
});