Question

正如标题所示，我正在尝试通过Angular提交表单，并且我希望在执行提交操作时显示一个小的加载div。这就是我现在所拥有的。

查看：

(3x3) x (3x1)

JS：

<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>

我尝试使用ng-click提交按钮更改提交bool，我尝试了jQuery，我尝试了基本上为$（）。hide（）的一些角度包装器，其中没有一个在提交动作时显示加载gif正在进行中。

我应该注意提交动作（注释掉的东西）都正如我所期望的那样，我在提交角度动作中所做的只是一个带有$ http的ajax调用，并显示成功的消息。

我发现有几页显示了一些相当复杂的解决方案，所以我想首先来到这里，因为表单提交上的加载gif是我认为应该相对简单的事情。

Answer 1

你在$ 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。 Promise有一个THEN方法，在$ http请求完成时执行。 catch块在非200 HTTP响应或失败（例如超时）时执行。

Answer 2

你的伪代码布局方式使你看起来像是在做类似的事情：

错误的版本

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

        });

在AngularJS表单提交时显示元素

2 个答案: