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

回答

相關問題