Corretto modo di gestire per ogni chiamate Ajax in Angular

Question

Ho bisogno di aggiornare i dati per ogni oggetto in un array usando un ciclo for e una volta che tutti i dati sono stati acquisiti, eseguire una funzione. Non voglio mescolare jQuery in questo e farlo nel modo corretto angolare di fare

Ecco quello che sto facendo,

$scope.units = ['u1', 'u2', 'u3']; 
    $scope.data = null; 
    //get individual unit data 
    $scope.getUnitData = function(unit){ 
     service.getUnitData(unit).success(function(response){ 
      $scope.data.push({'id' : response.id , 'value' : response.value}); 
     }); 
    }; 

    $scope.updateAllUnits = function(){ 
    $scope.data = null ; //remove existing data 
    angular.forEach($scope.units,function(val,key){ 
     $scope.getUnitData(val); 
    }; 
    console.log($scope.data); // Need to show all the data but currently it does not as the for each loop didn't complete 
    }; 

Il servizio è definito come.

app.factory('service',function($http){ 
    return { 
     getUnitData : function(unit){ 
     return $http({ 
      url : myURL, 
      method : 'GET', 
      params : {'unit' : unit} 
      }); 
     } 

    } 

}); 

Come si riceve una richiamata quando tutto il pull è stato eseguito nel ciclo for?

Answer 1

Il risultato della vostra chiamata $http(...) è una promessa. Ciò significa che è possibile utilizzare $q.all per attendere il completamento di un array.

$scope.updateAllUnits = function(){ 
    $scope.data = null ; //remove existing data 
    var promises = []; 
    angular.forEach($scope.units,function(val,key){ 
     promises.push($scope.getUnitData(val)); 
    }); 
    $q.all(promises).then(function success(data){ 
     console.log($scope.data); // Should all be here 
    }, function failure(err){ 
     // Can handle this is we want 
    }); 
};