I'm having trouble displaying a div tag on a form based on the boolean flag specified in ng-show. Unfortunately, the div is not showing up at all. Here's what I've tried so far without success. Any assistance would be greatly appreciated!
Form control in MVC View:
<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>
In Angular controller: This controller is the same as the one being used by the form, which is "PaymentCtrl".
$scope.isProcessing = false;
$scope.setProcessing = function (loading) {
$scope.isProcessing = loading;
}
$scope.sendPayment = function () {
$scope.setProcessing(true);
//Other logic here
$scope.setProcessing(false);
};
CSS Styles for div tags:
#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;
}