AngularJS微调器没有显示,可能是由于http.get触发太快

时间:2016-04-04 20:29:34

标签: javascript angularjs spinner http-get

如果这与其他帖子重复,请道歉,但我的声望点太低而无法评论。当我触发http get时,我有以下内容显示一个微调器。

HTML:

list <- list(1,1:2,1:3)
names(list[[1]]) <- "a"
names(list[[2]]) <- c("c", "a")
names(list[[3]]) <- c("a","c","b")

list <- rapply(list, function(x) data.frame(as.list(x)), how = 'list')

# [[1]]
#   a
# 1 1
# 
# [[2]]
#   c a
# 1 1 2
# 
# [[3]]
#   a c b
# 1 1 2 3

data.frame(data.table::rbindlist(list, fill = TRUE))[, c('a','b','c')]

#   a  b  c
# 1 1 NA NA
# 2 2 NA  1
# 3 1  3  2

控制器:

<button class="btn btn-primary" ng-click="loadRemedyData(showsitegroup.groupSelect)" 
    style="font-size:12px">
View UnScheduled WO's
<i ng-show="loading" class="fa fa-refresh fa-spin" ></i></button>

如果我注释掉将加载标志更改为false的最后一行,则微调器显示并继续运行,show证明它正在初始化。

问题是,如上所述,我认为它没有显示,因为它移动到最后一个标志变为快速,即使显示范围最多可能需要20-30秒。

我很欣赏20-30秒并不是很多但是我希望通过显示正在进行的微调器来显示微调器以防止不耐烦的用户认为它不起作用。

1 个答案:

答案 0 :(得分:2)

这是因为在将$scope.loading分配给false之前,您并没有等待http返回。

试试这个:

$scope.loadRemedyData = function(qName) {
//Injects scope from Remedy Database JSON
$scope.loading = true;
$http.get("/openremedywos?qName=" + qName).then(function (response){
    $scope.newdevices = response.data;
    $scope.loading = false; // brought it inside. Where it will wait for the http to get response.
});
}