Показывать элемент, пока форма AngularJS отправляет

Question

Как следует из названия, я пытаюсь отправить форму через Angular, и я хочу иметь небольшой загрузочный div, который отображается, пока выполняется действие отправки. Вот что я сейчас имею в виду.

Вид:

<div ng-app="SomeApp"> 
    <div ng-controller="SomeController" ng-init="submitting = false"> 
     <div id="LoadingOverlay" class="loadoverlay" ng-show="submitting"> 
      <img src="~/Content/img/loader.gif" class="loadspin" alt="Loading" /> 
     </div> 
     <form class="form-horizontal" role="form" ng-submit="submit()"> 
      <!-- Some Form Controls Going On Here --> 
     </form> 
    </div> 
</div> 

JS:

var setupApp = angular.module("SomeApp", []); 
setupApp.controller("SomeController", function ($scope, $http) { 
    $scope.submit = function() { 
     $scope.submitting = true; 
     // Carry out the submit actions 
     $scope.submitting = false; 
    }; 
}); 

Я попытался изменить подавшее заявку BOOL с нг нажмите на кнопку отправки, я попытался JQuery, и я попытался в основном некоторое угловое обертку для $() .hide(), ни один из которых не показывает загрузку gif во время выполнения действий отправки.

Я должен отметить, что действия отправки (материал прокомментирован) работают так, как я ожидал бы, все, что я делаю в подающем угловом действии, - это вызов ajax с $ http и сообщение об успешном завершении.

Я нашел пару страниц с некоторыми довольно сложными поисковыми решениями, поэтому я хотел сначала приехать сюда, так как загрузка gif на форме submit - это то, что, по моему мнению, должно быть относительно простым.

Answer 1

То, как вы ваш псевдо-код выкладывается он выглядит, как вы могли бы сделать что-то вроде:

Неправильная версия

var setupApp = angular.module("SomeApp", []); 
setupApp.controller("SomeController", function ($scope, $http) { 
    $scope.submit = function() { 
     $scope.submitting = true; 

     // Carry out the submit actions 
     $http({ 
      method: 'POST', 
      url: '/someUrl' 
     }).then(function successCallback(response) { 
      // this callback will be called asynchronously 
      // when the response is available 
     }, function errorCallback(response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
     }); 

     $scope.submitting = false; 
    }; 
}); 

Если это так, то вы делаете ваше загрузочное изображение видно, инициируйте свой запрос $http, а затем сразу же отключите флаг отправки. Вы хотите поставить $scope.submitting = false; внутри вашей функции обратного вызова, а не вне процесса асинхронной, как это:

Правая версия:

 $scope.submitting = true; 

     // Carry out the submit actions 
     $http({ 
      method: 'POST', 
      url: '/someUrl' 
     }).then(function successCallback(response) { 
      // this callback will be called asynchronously 
      // when the response is available 
      $scope.submitting = false; 
      // do stuff 

     }, function errorCallback(response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
      $scope.submitting = false; 
      // do stuff 

     }); 

Answer 2

в вашем $ scope.submit вы делаете ...

$scope.submit = function() { 
    $scope.submitting = true; 
    var postData = {name:"fred"}; 
    $http.post("/your/url", postData).then(function(response) { 
     // Carry out the success actions 
     $scope.submitting = false; 
    }).catch(function(error) { 
     // Carry out the failure actions 
     $scope.submitting = false; 
    }); 
}; 

Это работает, потому что служба $ HTTP возвращает обещание. У Promise есть метод THEN, который выполняется, когда запрос $ http завершен. Блок catch выполняется с ответом не на 200 HTTP или при отказе (например, тайм-аут).