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

的承诺回调中

 $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的承诺链，您需要为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
                });
            }
        });
 }

然后，您可以在refreshData的{{1}}

中返回then承诺

SEApplicationService.restartNode()

Answer 2

你可以像这样使用回调函数

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

            SEApplicationService.restartNode(function(){

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

             });

        }

这是服务器功能

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

Answer 3

在$ scope.disableControls = false;

之后放置一个范围。$ apply（）

阻塞调用之前不会触发角度绑定

3 个答案: