Demande asynchrone et bouton de chargement avec AngularJS

Question

La manipulation DOM dans un contrôleur angulaire semble être fausse. Mais cela ne vient pas sans quelques maux de tête :)

J'ai un bouton, et en ng-clic, il va effectuer une requête asynchrone en arrière-plan. Pendant le temps de cette requête asynchrone, je voudrais que tous les boutons (et peut-être quelques éléments supplémentaires sur la page) soient désactivés et que le bouton cliqué ait des icônes de chargement en cours de lecture.

Quelle est la manière la plus propre de le faire?

Answer 1

Je le fais généralement avec une variable sur le $ scope appelé chargement. Chaque fois qu'une opération asynch est en cours, il suffit de la définir sur true. Ensuite, tout ce qui doit être désactivé ou affecté peut baser son état sur cela.

Voici une commande factice:

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

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

Et voici un exemple de modèle.

<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

Voici exactement ce que vous recherchez

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(); 
     } 
    });