Javascript 提交表单后，加载微调器（ng show=Loading）始终为真。需要在收到数据后将其设置为false

我对范围变量有问题。我通过将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");
      }

    } 

---

您应该使用Angular提供的

$http

服务。否则，您必须告诉自己数据已更改：

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

---

顺便说一句，您似乎在做很多事情，但实际上并不是以角度的方式（例如，触摸DOM）。有什么原因吗？

您应该使用Angular提供的

$http

服务。否则，您必须告诉自己数据已更改：

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

---

顺便说一句，您似乎在做很多事情，但实际上并不是以角度的方式（例如，触摸DOM）。有什么原因吗？

Tr$scope.$apply（）在将其设置为false@Vivz工作！感谢您的快速帮助，但我建议您在将@FrankTr$scope.$apply（）设置为false@Vivz工作！谢谢你的快速帮助，但我会建议你按照@FrankThanke的建议，以有棱角的方式做每件事，这似乎已经成功了。我对AngularJS是新手。这就是为什么NurulAlam可能会研究数据绑定。例如，您可以使用Angular的

ng class

指令更新元素的CSS，而不是调用

.CSS

，您可以使用括号绑定数据，如

{message}

，而不是调用

.html

，等等。谢谢，这似乎已经做到了。我对AngularJS是新手。这就是为什么NurulAlam可能会研究数据绑定。例如，您可以使用Angular的

ng class

指令更新元素的CSS，而不是调用

.CSS

，您可以使用括号绑定数据，如

{message}

而不是调用

.html

，等等。