ui-router 包装器中的 Angular.js 循环依赖错误

Question

我正在遵循 John Papa 的角度风格指南 (https://github.com/johnpapa/angular-styleguide#routing)，并在本指南中提供的角度 ui-router 周围使用自定义包装器。但是，包装器对我不起作用，并且在注入 $state 时出现循环依赖错误：

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

我曾尝试使用 $injector 手动注入 $state，但这给了我一个未知的提供程序错误。

代码如下：

(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”包。

烤面包机：https://github.com/CodeSeven/toastr

角烤面包机：https://github.com/Foxandxss/angular-toastr

通过 'toastr' 包，他使用常量注册 toastr 的全局实例：

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

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

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

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

---

但是，如果你使用 angular-toastr 包，toastr 对象会引入一组对某些 angular 对象的依赖：

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

这会导致循环依赖，因为 $rootScope 具有使用 logger/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);
    }

}