AngularJS旋转加载

Question

当用户单击Submit Button时，我希望使Spinner出现，旋转器应该在AJAX发布并完成请求后停止

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

下面是我看到的旋转器的角度示例

http://plnkr.co/edit/BGLUYcylbIVJRz6ztbhf?p=preview

下面是我的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请求时，将显示spinner和进度条。

演示

请参考此转角加载杆。

将加载栏作为应用程序的依赖项。如果你想要动画，也包括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>

希望这能帮到你