Spinner加载与AngularJS

我想作微调应该出现时，用户点击提交按钮，微调应该停止一旦AJAX POST和GET请求完成Spinner加载与AngularJS

你能帮帮我知道我如何作出如下角码我要实现该功能。

下面是我在角

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>

来源

2016-11-19 Batman

使用一个变量，里面则函数将其设置为true，然后使用$超时将其设置为false，然后在HTML中可能使用NG-如果还是NG秀根据呼叫次数..不是一个好的处理方式，但将完成工作... –

尝试以下解决方案

这适用于所有的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>

希望这是帮助你

来源

2016-11-19 14:02:12

我试过上述解决方案但我在控制台中出现错误 'angular.js：68 Uncaught Error：[$ injector ：modulerr]无法实例化模块myApp，原因如下：错误：[ng：areq]参数'fn'不是函数，得到字符串 ' – Batman

我的代码现在有些问题，它工作谢谢！ – Batman

Spinner加载与AngularJS

回答

相关问题