当我不断刷新我的angularJS页面时,内容有时显示,有时不显示
When I keep refreshing my angularJS page, the content sometimes shows up, sometimes doesn't
我有一个运行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();
});
相关文章:
- 当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
- 如何根据URL显示内容
- 使用jQuery切换来显示内容,但防止在用户单击输入元素时关闭
- jquery on click事件来显示内容
- 正文中未显示内容
- 避免在用ng href加载样式表之前显示内容
- ajax加载后显示内容
- 为什么视频不显示在有角度的灯箱中?图像有效,但视频无效;t
- 如何使用 html 类或 id 在任何地方显示内容
- 使javascript按钮隐藏或显示内容切换
- 如何隐藏内容一和显示内容二
- 组合用于隐藏或显示内容的方法
- 显示内容时出现问题
- 单击即显示内容而不重新加载/刷新页面
- Angular 2 json 管道显示内容但不显示实际数据
- AngularJS popover未显示内容:渲染太早
- 使用单选按钮使用Jquery显示内容
- IE 11没有显示“;显示内容"弹出消息
- 使用三元运算符有条件地在 AngularJS 模板中显示内容
- 根据Media Query有条件地显示内容