提交表單后，加載微調框（ng-show = loading）始終為true。 接收數據后需要將其設置為假

Question

我在范圍變量方面遇到問題。 當有人單擊我的聯系表單上的“提交”按鈕時，我通過將ng-show屬性設置為true來啟動加載微調器。 之后，我將表單數據發送到后端，經過處理后，我應該能夠將loading spinners 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）。 有什么原因嗎？