cg occupé sur des promesses consécutives

Question

J'ai une usine qui stocke et met à jour périodiquement certaines données en utilisant un service (appel http $). Je veux l'indicateur occupé dans la vue chaque fois que les données sont mises à jour. L'usine expose l'objet de données et la promesse.

angular.module('myUI') 
    .factory('statusFactory', function ($timeout, statusService) { 
    var promise = {}; 
    var data = {}; 

    function update(){ 
     angular.extend(promise, statusService.status().$promise).then(function(response){ 
      angular.extend(data, response); 
     }); 
     $timeout(update, 10000); 
    } 
    update(); 

    return{ 
     data: data, 
     promise: promise 
    } 
}); 

Dans le contrôleur, je lie ces variables à la portée:

$scope.statusPromise = statusFactory.promise; 
    $scope.data = statusFactory.data; 

Et enfin dans la vue que je vous présente les données

<div cg-busy="statusPromise"> 
    {{data.var1}} 
    {{data.var2}} 
    ... 
</div> 

Maintenant, les données sont mises à jour sans problème, mais cg-busy ne fait rien. Je m'attendrais à l'icône occupée chaque fois que l'appel $ http est en cours de résolution. Cela fonctionne quand j'utilise le statusService directement dans le contrôleur.

Existe-t-il une meilleure façon de le faire? Comment puis-je exposer une promesse persistante de l'usine afin qu'elle mette à jour la vue à chaque nouvel appel?

Answer 1

Je voudrais essayer quelque chose comme ceci:

angular.module('myUI') 
    .factory('statusFactory', function ($timeout, statusService) { 
    var promise = {}; 
    var data = {}; 
    var busyIndicator = {busy: false}; 

    function update(){ 
     busyIndicator.busy = true; 
     angular.extend(promise, statusService.status().$promise).then(function(response){ 
      angular.extend(data, response); 
      busyIndicator.busy = false; 
     }); 
     $timeout(update, 10000); 
    } 
    update(); 

    return{ 
     data: data, 
     promise: promise 
    } 
}); 

Bind à $scope:

$scope.busyIndicator= statusFactory.busyIndicator; 

Et puis le lier à cg-busy (je suppose qu'il faut true ou false):

<div cg-busy="busyIndicator.busy"> 
    {{data.var1}} 
    {{data.var2}} 
    ... 
</div> 

busy besoins à utiliser à l'intérieur de l'objet busyIndicator, pour partager une référence entre l'usine et la vue. Vérifiez également si cg-busy fonctionne, avec la valeur codée en dur true.