AngularJS: è necessario attivare l'evento ogni volta che viene avviata una chiamata Ajax

Question

Sto provando a generare un evento su $ rootScope ogni volta che viene avviata una chiamata ajax.

var App = angular.module('MyApp'); 

App.config(function ($httpProvider) { 
    //add a transformRequest to preprocess request 
    $httpProvider.defaults.transformRequest.push(function() { 
     //resolving $rootScope manually since it's not possible to resolve instances in config blocks 
     var $rootScope = angular.injector(['ng']).get('$rootScope'); 
     $rootScope.$broadcast('httpCallStarted'); 

     var $log = angular.injector(['ng']).get('$log'); 
     $log.log('httpCallStarted'); 
    }); 
}); 

L'evento "httpCallStarted" non viene attivato. Sospetto che non sia corretto utilizzare $ rootScope o qualsiasi altro servizio di istanza nei blocchi di configurazione. In tal caso, come posso ottenere un evento ogni volta che viene avviata una chiamata http, senza dover passare un oggetto config ogni volta che effettuo una chiamata?

Grazie in anticipo

Answer 1

Si può sempre avvolgere $ http in un servizio. Dal momento che i servizi vengono impostati solo una volta, è sufficiente che la fabbrica di servizi configuri gli eventi per te. Mi sembra un po 'schifo, onestamente, ma è un buon lavoro, dal momento che Angular non ha ancora un modo globale per farlo, a meno che non sia stato aggiunto qualcosa nella 1.0.3 di cui non sono a conoscenza.

Here's a plunker of it working

Ed ecco il codice:

app.factory('httpPreConfig', ['$http', '$rootScope', function($http, $rootScope) { 
    $http.defaults.transformRequest.push(function (data) { 
     $rootScope.$broadcast('httpCallStarted'); 
     return data; 
    }); 
    $http.defaults.transformResponse.push(function(data){ 
     $rootScope.$broadcast('httpCallStopped'); 
     return data; 
    }) 
    return $http; 
}]); 

app.controller('MainCtrl', function($scope, httpPreConfig) { 
    $scope.status = []; 

    $scope.$on('httpCallStarted', function(e) { 
    $scope.status.push('started'); 
    }); 
    $scope.$on('httpCallStopped', function(e) { 
    $scope.status.push('stopped'); 
    }); 

    $scope.sendGet = function(){ 
    httpPreConfig.get('test.json');  
    }; 
}); 

Answer 2

Ho verificato che questo codice funziona come previsto. Come accennato in precedenza, non stai recuperando l'iniettore che pensi di essere e devi recuperare quello in uso per la tua app.

discussionApp.config(function($httpProvider) { 
    $httpProvider.defaults.transformRequest.push(function(data) { 
    var $injector, $log, $rootScope; 
    $injector = angular.element('#someid').injector(); 

    $rootScope = $injector.get('$rootScope'); 
    $rootScope.$broadcast('httpCallStarted'); 

    $log = $injector.get('$log'); 
    $log.log('httpCallStarted'); 
    return data; 
    }); 
}); 

Answer 3

Il modo migliore per farlo è utilizzare un intercettore http. Verifica this link

Answer 4

Cagatay ha ragione. Migliore utilizzo $http intercettori:

app.config(function ($httpProvider, $provide) { 
    $provide.factory('httpInterceptor', function ($q, $rootScope) { 
     return { 
      'request': function (config) { 
       // intercept and change config: e.g. change the URL 
       // config.url += '?nocache=' + (new Date()).getTime(); 
       // broadcasting 'httpRequest' event 
       $rootScope.$broadcast('httpRequest', config); 
       return config || $q.when(config); 
      }, 
      'response': function (response) { 
       // we can intercept and change response here... 
       // broadcasting 'httpResponse' event 
       $rootScope.$broadcast('httpResponse', response); 
       return response || $q.when(response); 
      }, 
      'requestError': function (rejection) { 
       // broadcasting 'httpRequestError' event 
       $rootScope.$broadcast('httpRequestError', rejection); 
       return $q.reject(rejection); 
      }, 
      'responseError': function (rejection) { 
       // broadcasting 'httpResponseError' event 
       $rootScope.$broadcast('httpResponseError', rejection); 
       return $q.reject(rejection); 
      } 
     }; 
    }); 
    $httpProvider.interceptors.push('httpInterceptor'); 
}); 

penso interceptors opere per le versioni 1.1.x. dopo C'era responseInterceptors prima di quella versione.