Question

我只是提交一个表单。需要一些时间才能返回响应，那时我需要显示加载程序。
这是我的代码

<div id="page-loading">
            <img style="display:none; margin:0 auto;"  src="~/images/loader.gif" />
        </div>

脚本：

$scope.myFunc = function (leave) {
                            $scope.leaveDetails=leave;
                            console.log($scope.leaveDetails)
                            var requestHeaders = {
                                "content-type": 'application/json'
                            }
                            var httpRequest = {
                                method: 'POST',
                                url: '/Admin/sendRequest',
                                headers: requestHeaders,
                                data: $scope.leaveDetails
                            }
                            $http(httpRequest).then(function (response) {
                                $timeout(function () {
                                   $('#page-loading').fadeOut('slow');
                                }, 1000);

                                alert("successfully applied")
                                window.location= "/admin/Home";
                            })
                        }

但是它没有显示加载器但是花了更多的时间来返回响应。

如果我在这里给display:block，默认加载器<img style="display:none; margin:0 auto;" src="~/images/loader.gif" />即将到来，但我需要仅显示表单on submit。
有任何建议吗？

Answer 1

将变量设置为方法顶部的$scope.loading = true范围，然后在http promise的finally处理程序中将其设置为false。

$http(httpRequest).then(...).finally(function() { $scope.loading = false; })

根据该标志，您可以隐藏并显示您的装载机。

<div id="page-loading" ng-if="loading">
    <img style="margin:0 auto;"  src="~/images/loader.gif" />
</div>

Answer 2

我会使用ng-if来显示和隐藏加载器：

<div ng-if="loaderVisible">
     <img margin:0 auto;"  src="~/images/loader.gif" />
</div>

然后你可以在函数的开头设置loaderVisible = true，并在回调成功期间将其设为false，从而再次隐藏它。

Answer 3

你可以使用angular-busy下面的链接，

https://github.com/cgross/angular-busy

使用非常简单，不需要这一切，如果您不喜欢的加载器，您可以更改加载器CSS als

在angularjs中显示装载程序

3 个答案: