AngularJS的異步請求和加載按鈕

Question

Angular控制器內的DOM操作似乎是錯誤的。但是，這不是沒有幾個頭痛:)

我有一個按鈕，並在ng點擊，它會在後臺執行一個異步請求。在該異步請求期間，我希望禁用所有按鈕（也可能還有頁面上的其他幾個元素），並且點擊按鈕可以播放加載圖標。

這樣做的最乾淨的方法是什麼？

Answer 1

我通常在$範圍內調用一個變量，稱爲加載。每當異步操作發生時，只需將其設置爲true即可。那麼任何需要被禁用或以其他方式受到影響的東西都可以基於它的狀態。

這裏是一個虛擬控制：

function TestCtrl($scope, $http) { 
    $scope.loading = false; 

    $scope.doASynch = function() { 
     $scope.loading = true; 
     $http.get("/url").success(function() { 
      $scope.loading = false; 
     }); 
    } 
} 

這裏是一個示例模板。

<div ng-controller="TestCtrl"> 
    <a class="button" ng-disabled="loading" ng-click="doASynch()"> 
     <span ng-hide="loading">Click me!</span> 
     <span ng-show="loading">Loading....</span> 
    </a> 
</div> 

Answer 2

這裏正是你正在尋找

Loading animations with Asynchronous HTTP Requests in Angular JS

var app = angular.module('myapp', ["ui.utils", "ui.router"]); 

    app.factory('iTunesData', function($http) { 
     return { 
      doSearch: function(sQuery) { 
       //return the promise directly. 
       return $http.jsonp('http://itunes.apple.com/search', { 
         params: { 
          "callback": "JSON_CALLBACK", 
          "term": sQuery 
         } 
        }); 
      } 
     } 
    }); 

    app.controller('iTunesSearch', function($scope, $location, $routeParams, iTunesData) { 
     $scope.search = function() { 
      iTunesData2.doSearch($scope.searchTerm) 
      .then(function(result) { 
        $scope.data = result.data; 
        $location.path($scope.searchTerm); 
       }); 
     } 
     $scope.searchTerm = $location.$$path.split("/")[1]; 
     if($scope.searchTerm!="") { 
      $scope.search(); 
     } 
    });