Question

我试图根据ng-show中指定的布尔标志在表单上显示div标签。但是div根本没有显示。以下是我尝试过的，但是没有用。谢谢你的帮助！

MVC视图中的表单控件：

<form name="payment" role="form" ng-submit="sendPayment()" ng-controller="PaymentCtrl">
        <div id="veil" ng-show="isProcessing == true"></div>
        <div id="feedLoading" ng-show="isProcessing == true">
            <img src="~/images/ajax_loader_blue_64.gif" class="img-responsive center-block" />
        </div>

        //Other form controls here
</form>

在Angular控制器中：该控制器与表单使用的控制器相同，即＆＃34; PaymentCtrl＆＃34;。

$scope.isProcessing = false;

    $scope.setProcessing = function (loading) {
        $scope.isProcessing = loading;
    }

    $scope.sendPayment = function () {
        $scope.setProcessing(true);
        //Other logic here
        $scope.setProcessing(false);
    };

div标签的CSS样式：

#veil {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
cursor: not-allowed;
filter: alpha(opacity=60);
opacity: 0.6;
background: #000000 url(http://www.wingo.com/angular/AngularShieldLogo.png) no-repeat center;
}

#feedLoading {
position: absolute;
top:200px;
width:100%;
text-align: center;
font-size: 4em;
color:white;
text-shadow: 2px 2px 2px #021124;
}

Answer 1

您的sendPayment可能正在进行异步服务调用，等待通过承诺解决。在函数执行结束时，您的isProcessing布尔值会立即切换回来。无论你的承诺何时实际解决，你的布尔值都已经改变了。

您应该在承诺回来后重置您的isProcessing布尔值。确保在成功和错误回调函数中重置它。例如，如果您的代码使用了承诺：

service.sendPayment() 
    .then(function() {
            $scope.setProcessing(false);
        },
        function(error) {
            $scope.setProcessing(false);
        });

或者，如果您在控制器中使用$http，则可以使用包裹的.success和.error回调：

$http.post(url, data) 
    .success(function () {
        $scope.setProcessing(false);
    })
    .error(function (error) {
        $scope.setProcessing(false);
    });

AngularJS - ng-show没有有条件地显示div标签？

1 个答案: