视图前的长延迟反映了更新的$ scope值

Question

在我的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和实际显示微调器之间似乎有几秒的延迟。

Answer 1

然后$ 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}}

Answer 2

解决方案

我使用$timeout修复此问题，如下所示：

function submitForm() {
    $scope.submissionInProgress = true;

    $timeout(function() {
        myService.veryExpensiveOperation();
        $scope.submissionInProgress = false;
    });
}

Answer 3

你也可以使用回调

回调

function submitForm() {
    $scope.submissionInProgress = true;
    myService.veryExpensiveOperation(function() {
        $scope.submissionInProgress = false;
    });
}

和函数veryExpensiveOperation：

veryExpensiveOperation = function(callback) {
...
success: function() {
   if(typeof callback == "Function") {
      callback();
   }
}
...
}