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表单提交时显示元素

回答

相关问题