在AngularJS中的循環依賴

我一直在嘗試從interceptorService（file：authenticationServices.js）調用UserService.openLogin（）函數，但我沒有成功。在AngularJS中的循環依賴

所有正在工作的權利，但是當我嘗試注入UserService作爲依賴，在interceptorService，AngularJS返回我以下錯誤：

「未捕獲的錯誤：[$注射器：CDEP]圓形依賴發現：$ http < - UserService < - interceptorService < - $ http < - $ templateRequest < - $ compile「。

請問，有人可以幫助我嗎？

文件：authenticationModule.js

angular 
.module('app.authentication', [ 
    'app.authentication.controllers', 
    'app.authentication.services', 
    'app.authentication.directives'] 
) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/register', { 
      templateUrl: 'app/modules/authentication/authenticationViews/authenticationUserCreate.html', 
      controller: 'authenticationController as loginCtrl', 
      css: 'app/modules/authentication/authenticationViews/css/authenticationStyles.css', 
     }) 
     .when('/edit', { 
      templateUrl: 'app/modules/authentication/authenticationViews/authenticationProfileEdit.html', 
      controller: 'authenticationController as loginCtrl', 
      css: 'app/modules/authentication/authenticationViews/css/authenticationStyles.css', 
     }) 
}]) 

.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('interceptorService'); 
}])

文件：authenticationControllers.js

angular.module('app.authentication.controllers', []) 

.controller('authenticationController', ['UserService', '$location', '$uibModalInstance', 
    function (UserService, $location, $uibModalInstance) { 
     var self = this; 

     self.user = { 
      username: '', 
      password: '' 
     }; 

     self.login = function() { 
      UserService.login(self.user).then(
       function (success) { 
        if (success.status == '400') { 
         window.alert(success.data.error_description); 
        } 
        else { 
         $location.path('/jobs'); 
         $uibModalInstance.close(); 
        } 
       }, 
       function (error) { 
        UserService.logout(); 
        window.alert(error.message) 
       }) 
     }; 

     self.closeLogin = function() { 
      $uibModalInstance.dismiss(); 
     } 

     self.logout = function() { 
      UserService.logout(); 
     }; 
    }])

文件：authenticationServices.js

angular.module('app.authentication.services', []) 

.factory('StorageService', [function() { 
    return { 
     isAuth: false, 
     userData: { 
      userName: "", 
      token: "" 
     }, 
    } 
}]) 

.factory('UserService', ['$http', '$uibModal', 'StorageService', function ($http, $uibModal, StorageService) { 
    return { 
     login: function (user) { 
      var data = "grant_type=password&username=" + user.userName + "&password=" + user.password; 
      var serviceBase = "http://localhost:53944/"; 

      return $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) 
       .then(function (response) { 

        if (response.data.access_token) { 
         StorageService.isAuth = true; 
         StorageService.userData.token = response.data.access_token; 
        } 
        return response; 
       }); 
     }, 
     openLogin: function() { 
      $uibModal.open({ 
       animation: true, 
       templateUrl: 'app/modules/authentication/authenticationViews/authenticationLogin.html', 
       controller: 'authenticationController', 
       controllerAs: 'loginCtrl', 
       size: 'md' 
      }) 
     }, 
     logout: function() { 
      StorageService.userData.token = ""; 
      StorageService.userData.userName = ""; 
      StorageService.isAuth = false; 
     } 
    }; 
}]) 

.factory('interceptorService', ['StorageService', 'UserService', function (StorageService, UserService) { 

    return { 

     request: function (config) { 
      var userData = StorageService.userData; 
      if (userData.token) { 
       config.headers = config.headers || {}; 
       config.headers.Authorization = 'Bearer ' + userData.token; 
      } 
      return config; 
     }, 
     responseError: function (rejection) { 

      debugger; 
      switch (rejection.status) { 
       case 401: 
        UserService.openLogin(); 
        //window.alert("Erro: " + rejection.status); 
        break; 
       case 400: 
        window.alert("Erro: " + rejection.status + "Descrição: " + rejection.data.error_description); 
        break; 
       default: 
        window.alert("Erro: " + rejection.status); 

      } 

      return rejection; 
     } 
    } 
}])

來源

2015-12-14 Rodrigo

這是一個循環引用，因爲您的服務依賴於$ http和你已經配置了依賴於您的服務攔截。 http - >攔截器 - >你的服務 - > http。可能相關：http://stackoverflow.com/questions/14681654/i-need-two-instances-of-angularjs-http-service-or-what –

您正在將InterceptorService推入httpprovider，然後將httpprovider注入到攔截服務 –

我已經找到一種方法來注入UserService沒有循環依賴錯誤。但我不知道是否正確。有人知道嗎？

看治標不治本：

.factory('interceptorService', ['StorageService', '$injector', function (StorageService, $injector) { 

    return { 

     request: function (config) { 
      var userData = StorageService.userData; 
      if (userData.token) { 
       config.headers = config.headers || {}; 
       config.headers.Authorization = 'Bearer ' + userData.token; 
      } 
      return config; 
     }, 
     responseError: function (rejection) { 

      debugger; 
      switch (rejection.status) { 
       case 401: 
        $injector.get('UserService').openLogin(); 
        break; 
       case 400: 
        window.alert("Erro: " + rejection.status + "Descrição: " + rejection.data.error_description); 
        break; 
       default: 
        window.alert("Erro: " + rejection.status); 

      } 

      return rejection; 
     } 
    } 
}])

來源

2015-12-15 13:58:28 Rodrigo

在AngularJS中的循環依賴

回答

相關問題