在我的Angular 1.4.X应用程序中,我在控制器中有一些这样的代码
function submitForm() {
$scope.submissionInProgress = true;
myService.veryExpensiveOperation();
$scope.submissionInProgress = false;
}
在视图中,当$scope.submissionInProgress
(同步操作)正在进行时,我尝试使用veryExpensiveOperation()
来显示/隐藏微调器。
<div ng-show="submissionInProgress" class="spinner">
Please wait...
</div>
然而,实际发生的事情是在veryExpensiveOperation()
几乎完成之前不会显示微调器。换句话说,在调用$scope.submissionInProgress = true
和实际显示微调器之间似乎有几秒的延迟。
答案 0 :(得分:0)
然后$ http请求异步。在请求完成之前,$http
的值会发生变化。
如果您发出$scope.submissionInProgress
请求,最好在resolve
函数内切换 function submitForm() {
$scope.submissionInProgress = true;
myService.veryExpensiveOperation().then(successCallback, failCallback);
function successCallback() {
//..Do whatever you have to do and then set the $scope on false.
$scope.submissionInProgress = false;
}
function failCallback() {
//Same here
$scope.submissionInProgress = false;
}
}
。
e.g。
{{1}}
答案 1 :(得分:0)
我使用$timeout
修复此问题,如下所示:
function submitForm() {
$scope.submissionInProgress = true;
$timeout(function() {
myService.veryExpensiveOperation();
$scope.submissionInProgress = false;
});
}
答案 2 :(得分:-1)
你也可以使用回调
function submitForm() {
$scope.submissionInProgress = true;
myService.veryExpensiveOperation(function() {
$scope.submissionInProgress = false;
});
}
和函数veryExpensiveOperation:
veryExpensiveOperation = function(callback) {
...
success: function() {
if(typeof callback == "Function") {
callback();
}
}
...
}