Question

我想让用户点击提交按钮时出现Spinner，一旦AJAX POST和GET请求完成，Spinner就会停止

你能帮我知道我如何制作我的下面的角色代码来实现这个功能。

下面是我在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

尝试以下解决方案

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

Demo

请参阅此angular-loading-bar。

将加载栏包含为您应用的依赖项。如果您想要动画，请同时包含ngAnimate。注意：ngAnimate是可选的

public Principal getUserPrincipal() {
        Authentication auth = getAuthentication();

        if ((auth == null) || (auth.getPrincipal() == null)) {
            return null;
        }    
        return auth;
}

//And the getAuthentication
private Authentication getAuthentication() {
    Authentication auth = SecurityContextHolder.getContext().getAuthentication();

    if (!trustResolver.isAnonymous(auth)) {
        return auth;
    }
    return null;
}

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

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

希望这对你有帮助

使用AngularJS加载微调器

1 个答案: