ui路由器封装中的Angular.js循环依赖错误

Question

我遵循John Papa的角度样式指南（https://github.com/johnpapa/angular-styleguide#routing）并在本指南中提供的角度ui路由器周围使用自定义封装。然而，包装不为我工作，并注入$状态时，我得到一个循环依赖错误：

Uncaught Error: [$injector:cdep] Circular dependency found: $rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr <- logger <- $exceptionHandler <- $rootScope <- $state <- routerHelper 

我曾尝试手动进$状态使用$注射器但是这给了我一个未知的提供程序错误。

下面是代码：

(function() { 
'use strict'; 

angular 
    .module('blocks.router') 
    .provider('routerHelper', routerHelperProvider); 

routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider', '$injector']; 

function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) { 


    this.$get = RouterHelper; 

    $locationProvider.html5Mode(true); 

    RouterHelper.$inject = ['$state']; 

    function RouterHelper($state) { 
     var hasOtherwise = false; 

     var service = { 
      configureStates: configureStates, 
      getStates: getStates 
     }; 

     return service; 

     function configureStates(states, otherwisePath) { 
      states.forEach(function (state) { 
       $stateProvider.state(state.state, state.config); 
      }); 
      if (otherwisePath && !hasOtherwise) { 
       hasOtherwise = true; 
       $urlRouterProvider.otherwise(otherwisePath); 
      } 
     } 

     function getStates() { 
      return $state.get(); 
     } 
    } 

} 
})(); 

Answer 1

我觉得这是一个toastr问题，而不是UI路由器代码。

John Papa将他的例子从简单的“toastr”包中取出，而不是“angular-toastr”包。

toastr：https://github.com/CodeSeven/toastr

角toastr：https://github.com/Foxandxss/angular-toastr

随着 'toastr' 包，他注册使用恒定toastr的全局实例：

.module('app.core') 
    .constant('toastr', toastr); 

这使得它可用于注入进入记录器服务：

logger.$inject = ['$log', 'toastr']; 

/* @ngInject */ 
function logger($log, toastr) { 

---

但是，如果您使用的角toastr包，toastr对象介绍了在某些角度对象的依赖集：

$rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr 

，这将导致循环依赖，因为$ rootScope有一个使用异常处理记录器/ toastr对象：

toastr <- logger <- $exceptionHandler <- $rootScope 

---

我不知道如何正确地重构这个删除循环依赖。所以作为一个临时解决方案，我改变了记录器服务，以使用$ injector延迟解析toastr依赖。不理想，但我能够转移到其他紧迫的问题。

logger.$inject = ['$log', '$injector']; // 'toastr' 

/* @ngInject */ 
function logger($log, $injector) { // toastr 

    var service = { 
     showToasts: true, 

     info : info, 
     success : success, 
     warning : warning, 
     error : error, 

     // straight to console; bypass toastr 
     log  : $log.log 
    }; 

    return service; 
    ///////////////////// 


    function info(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.info(message, title); 
     $log.info('Info: ' + message, data); 
    } 

    function success(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.success(message, title); 
     $log.info('Success: ' + message, data); 
    } 

    function warning(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.warning(message, title); 
     $log.warn('Warning: ' + message, data); 
    } 

    function error(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.error(message, title); 
     $log.error('Error: ' + message, data); 
    } 

}