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'包。

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

angular-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對象會在一些角度對象上引入一組依賴關系：

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

}