javascript - 在阻止调用之前， Angular 绑定(bind)不会触发

Question

当用户单击表单上的按钮时，我希望它禁用所有控件，然后转到服务器执行操作，这样他们就无法更改任何值，直到结果返回。当结果返回时，可以重新启用表单。

但是这是我的代码

$scope.restartNode = function () {
            $scope.isBusy = true;
            $scope.disableControls = true;

            SEApplicationService.restartNode();

            $scope.isBusy = false;
            $scope.disableControls = false;
        }

restartNode 是对 Web API 方法的阻塞调用，但控件不会被禁用。如果我注释掉最后一行 - 将控件设置回启用状态，我可以看到所有表单控件按预期显示为灰色。这里发生了什么？

我的阻止调用是

appService.restartNode = function () {
        return $http.post("/SEFlex/SEFlexAdmin/RestartNode", {
            isPrimary: appService.primarySelected
        }).success(function (response, status, headers, config) {
            appService.refreshData();
        }).error(function (reason, status, headers, config) {
            console.log(reason);
        });
    }

编辑:添加refreshData()函数

appService.refreshData = function () {
        return $http.post("/SEFlex/SEFlexAdmin/GetNodesStatus")
            .success(function (response, status, headers, config) {
                if (response) {

                    angular.forEach(response.data, function(value) {
                        if (value.isPrimary) {
                            appService.ServiceStatus.PrimaryStatus = value.status;
                            appService.ServiceStatus.PrimaryPools = value.poolCount;
                            appService.ServiceStatus.PrimaryContainers = value.containerCount;
                            appService.ServiceStatus.PrimaryNodes = value.nodeCount;
                        } else {
                            appService.ServiceStatus.SecondaryStatus = value.status;
                            appService.ServiceStatus.SecondaryPools = value.poolCount;
                            appService.ServiceStatus.SecondaryContainers = value.containerCount;
                            appService.ServiceStatus.SecondaryNodes = value.nodeCount;
                        }
                    });
                }
            })
            .error(function (reason, status, headers, config) {
                console.log(reason);
            });
    }

Answer 1

问题是请求是异步的，您没有等待响应来更改您的 busy 和 disable 变量。

将它们包装到restart的promise回调中

 $scope.restartNode = function () {
        $scope.isBusy = true;
        $scope.disableControls = true;

        SEApplicationService.restartNode().then(function(){
            $scope.isBusy = false;
            $scope.disableControls = false;
        }).catch(function(err){
            // any promise rejected in chain will be caught  here
        });            
    }

编辑:要正确创建 restartNode 和 refreshData 的 promise 链，您需要将 success 切换为 then 。这是 success 被弃用的原因之一:

appService.refreshData = function () {
    return $http.post("/SEFlex/SEFlexAdmin/GetNodesStatus")
        .then(function (response, status, headers, config) {
             var responseData = response.data;
            if (responseData ) {

                angular.forEach(responseData.data, function(value) {
                    // code left out for brevity
                });
            }
        });
 }

然后你可以在SEApplicationService.restartNode()的then中返回refreshData promise

 appService.restartNode = function () {
    return $http.post("/SEFlex/SEFlexAdmin/RestartNode", {
        isPrimary: appService.primarySelected
    }).then(function (response, status, headers, config) {
        return appService.refreshData();
    })
}