2013-08-28 15 views
5

Uso AngularJS 1.2Come si trasmette dall'intercettore http?

mio intercettore aspetto:

 $httpProvider.interceptors.push(['$q', '$log', '$rootScope', function ($q, $log, $rootScope) { 
      return { 
       'request': function(config) { 
        $rootScope.$broadcast('spin'); 
        console.info('request!'); 
        return config || $q.when(config); 
       }, 
... 

Nel mio controller nav (che gestisce e si lega il caricatore/filatore alla vista):

$rootScope.$watch('spin', function(event) { 
    console.info('spin'); 
    $scope.spinner++; 
}); 

La trasmissione sembra accadere solo una volta alla fine di tutte le risposte ricevute, anche se posso vedere molte richieste ! nel registro della console.

Come devo gestire il mio spinner/caricatore globale?

MODIFICA Desidero visualizzare un caricatore/filatore nella mia barra di navigazione quando i dati vengono caricati.

+0

cosa vuoi ottenere utilizzando questo –

+0

modificare @Ajaybeniwal: fini aggiunti – Tjorriemorrie

risposta

4

La funzione $watch non ascolta i messaggi broadcast. Controlla i cambiamenti sull'oscilloscopio. In questo caso, si sta chiamando una funzione ogni volta che si modifica $rootScope.spin, che viene chiamato immediatamente (per impostazione predefinita), motivo per cui è stato chiamato una volta.

La funzione $on è ciò che si desidera qui, poiché è ciò che ascolterà gli eventi di trasmissione.

$rootScope.$on('spin', function(msg, data) { 
    console.info('spin'); 
    $scope.spinner++; 
}); 

Ho messo insieme un esempio completo di lavoro, se siete curiosi:

http://codepen.io/BrianGenisio/pen/wIBHz

3

Invece di utilizzare watcher si deve solo usare su nella funzione di modulo di corsa

angular.module('test',[]).run(['$rootScope' function ($rootScope) { 
    $rootScope.$on("$spin", function() { 
     // set the spinner here 
    }); 

}]); 
+0

Dove posso trovare maggiori informazioni su 'run' e' $ on' e '$ broadcast'? – Tjorriemorrie

+0

http://code.angularjs.org/1.2.0rc1/docs/api/angular.Module http://code.angularjs.org/1.2.0rc1/docs/api/ng.$rootScope.Scope –

Problemi correlati