微调器加载 AngularJS

Question

我想让 Spinner 应该在用户点击提交按钮时出现，Spinner 应该在 AJAX POST 和 GET 请求完成后停止

你能帮我知道我是如何制作下面的 Angular 代码来实现该功能的。

下面是我在 Angular

中看到的 Spinner 示例

Demo

下面是我的 AngularJS 代码。

  var app = angular.module("myApp", ["ngTable"]);

    app.controller("Controller", ["$scope", "$http", "$window",
        function ($scope, $http, $window) {

            $scope.firstFunction = function () {
                $http({
                    method: 'POST',
                    url: 'mainDeviceSite.php',
                    //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                    data: {
                        accountnumber: $scope.accountnumber
                    },
                }).then(function (response) {
                    var data = response.data;
                    $scope.post = response.data;
                    $scope.cellularIPAddressValue = response.data.devices;
                    console.log($scope.cellularIPAddressValue);

                    //$scope.secondFunction(data);
                }, function (error) {
                    var data = error.data;
                    console.log("Error" + data);
                })
            }

       $scope.secondFunction = function () {
            $http({
                method: 'POST',
                url: 'BEPEvents.php',
                //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                data: {
                    accountnumber: $scope.accountnumber
                },
            }).then(function (response) {
                var data = response.data;
                $scope.post = response.data;

                var x2js = new X2JS();
                $scope.aftCnv = x2js.xml_str2json(response.data);
                $scope.bepValues = $scope.aftCnv.EEPEvents.BlobData;
                console.log($scope.bepValues);
            }, function (error) {
                var data = error.data;
                console.log("Error" + data);
            })
        }
    }
]);

HTML代码

 <div class="example">
            <div class="col-md-12">
                <div class="row">
                    <div class="input-group form-search">
                        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
                        <span class="input-group-btn">
                     <button type="submit" ng-click="firstFunction();secondFunction()" class="btn btn-primary">Submit</button>
                     </span>
                        <span id="message">{{message}}</span>
                    </div>
                </div>
            </div>
        </div>

Answer 1

尝试以下解决方案

这适用于在 angular 控制器中使用的所有 http 请求。当您调用 http 请求时，您会显示微调器和进度条

Demo

参考这个angular-loading-bar。

将加载栏作为您应用的依赖项。如果你想要动画，也包括 ngAnimate。注意：ngAnimate 是可选的

angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])

包含提供的 JS 和 CSS 文件（或创建您自己的 CSS 以覆盖默认值）。

<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>

希望对您有所帮助

微调器加载 AngularJS

Spinner Loading with AngularJS

spinner

angularjs