AngularJS表單提交時顯示元素

正如標題所示，我正在嘗試通過Angular提交表單，並且希望在執行提交操作時顯示一個小的加載div。這是我目前所擁有的。AngularJS表單提交時顯示元素

查看：

<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; 
    }; 
});

我試圖改變與提交布爾NG點擊，我試圖jQuery和我試圖爲$基本上是一些角度包裝（）.hide（），當提交操作正在執行時，其中沒有一個顯示加載gif。

我應該注意提交操作（註釋掉的東西）都按照我的預期工作，我在提交角動作中所做的全部操作都是帶有$ http的ajax調用，並顯示成功消息。

我發現一些頁面顯示了一些相當複雜的外觀解決方案，所以我想首先來這裏，因爲表單提交中的加載gif是我認爲應該相對簡單的事情。

在你做你的$ scope.submit

來源

2016-01-13 Justin Packwood

你設置'$ scope.submitting = FALSE'在$內http響應處理，還是外面呢？如果在外面，那麼看起來可能會將其設置爲可見，然後立即使其不可見。你的基本概念聽起來很合適。 – Danny

，你有你的僞代碼中的佈局方式使得它看起來就像你可能會做喜歡的事：

版本錯誤

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 

     });

來源

2016-01-13 17:36:49 Danny

你會把$ scope.submitting = false;在你稱之爲successCallback的內部（承諾解析）和errorCallback方法內部。你可以使用匿名函數。因爲它代表scope.submitting = false將立即執行，這不是提問者想要的。 – danday74

更好的代碼:)雖然POST更有可能提交 – danday74

是的，我展示了我認爲他在代碼中做了什麼，然後說他應該改變它，但是我沒有表現出來，有點混亂。爲了清楚起見，添加了明確的修正版 – Danny

...

$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響應或失敗時執行（例如超時）。

來源

2016-01-13 17:34:17 danday74

我建議他們使用'.finally（function（）{$ scope.submitting = false;}）''以避免代碼重複，因爲'finally'和'* fails'都會執行finally。 – jusopi

jusopi有用的技巧謝謝 – danday74

AngularJS表單提交時顯示元素

回答

相關問題