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

我正在遵循John Papa的角度样式指南（https://github.com/johnpapa/angular-styleguide#routing），并在本指南中提供的角度ui路由器周围使用自定义包装。但是，包装器对我不起作用，并且在注入$ 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();
        }
    }

}
})();

最佳答案

我认为这是烤面包机的问题，而不是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对象会引入一些对某些Angle对象的依赖关系：

$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);
    }

}

关于javascript - ui-router包装中的Angular.js循环依赖项错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33583633/