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

时间:2017-02-08 14:03:31

标签: javascript angularjs

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

3 个答案:

答案 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();
   }
}
...
}