加载微调器(ng-show = 加载)在表单提交后始终为真.接收数据后需要将其设为假

Question

我在作用域变量方面遇到问题。我通过将 ng-show 属性设置为 true 来启动加载微调器，只要有人单击我的联系表单上的提交按钮。之后，我将表单数据发送到我的后端，经过处理，我应该能够将加载微调器 ng-show 属性设置为 false。但是，从后端接收数据后，该属性不会变为 false。

这是我的代码。

$scope.submit = function(){
$scope.loading = true; //at this point loading spinner appears
//pass them to api that handles mail sending and
var contact_name = $('#name').val();
var contact_email = $('#email').val();
//var contact_body = $('#contact_body').html();
console.log(contact_name +" " +contact_email );
if(contact_name != "" && contact_email != "")
{
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: baseUrl+'api/mail',
type:'POST',
dataType:'json',
data: $('#contactFormId').serialize(),
success:function(data)
{
$scope.loading = false;
console.log("1: Scope loading is set to "+ $scope.loading);             
if(data)
{
$('.msgHolder').css({
'border':'1px solid #9e9c9c',
'text-align':'center',
'padding':'8px',
'color':'green'
});
$('.msgHolder').html(data.message);
$scope.loading = false;
console.log("2 Scope loading is set to "+ $scope.loading);  //this is the PROBLEM, conse says $scope.loading is false but the spinner does not go away.
}
else
{ 
//default bg
$('.msgHolder').css({
'border':'1px solid #9e9c9c',
'text-align':'center',
'padding':'8px',
'color':'red'
});
$('.msgHolder').html("Email Was not sent. There was an Error.");
vcRecaptchaService.reload($scope.widgetId)
} 
}
});
}
else
{
$scope.loading = false;
console.log("2: Scope loading is set to "+ $scope.loading); // this actually works. and spinner disappears
$('.msgHolder').css({
'border':'1px solid #9e9c9c',
'text-align':'center',
'padding':'8px',
'color':'red'
});           
$('.msgHolder').html("Email Was not sent. Required data missing");
}
} 

Answer 1

您应该使用 Angular 提供的$http服务。否则，你必须告诉 Angular 自己数据已经改变：

$scope.$apply(function() {
$scope.loading = false;
});

顺便说一下，你似乎在做很多不是真正 Angular 方式的事情(例如，触摸 DOM(。有原因吗？