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

我尝试使用 ng-click 提交按钮来更改提交 bool，我尝试了 jQuery，并且我基本上尝试了 $().hide() 的一些 Angular 包装器，其中没有一个在提交操作时显示加载 gif正在进行中。

我应该注意到，提交操作(注释掉的内容)都按照我的预期工作，我在提交 Angular 操作中所做的只是使用 $http 进行 ajax 调用并显示成功消息。

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

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

        });