angularjs - 如何将 toastr 库注入(inject)日志记录模块而不会在异常处理程序中出现循环依赖错误

Question

我已将 AngularJS-Toaster 库添加到我的 index.html 中:

<link href="lib/angularjs-toaster/toaster.min.css" rel="stylesheet" />
<script src="lib/angularjs-toaster/toaster.min.js"></script>
<toaster-container 
  toaster-options="{'position-class': 'toast-bottom-center'}">
</toaster-container>

在我的 Angular 应用中:

//app.js
(function () {
    angular
        .module('app', ['toaster','blocks.logger',/*etc*/]);
})();

//blocks/logger/logger.module.js
(function () {
    angular.module('blocks.logger', ['toaster']);
})();

//blocks/logger/logger.js
(function () {
'use strict';

angular
    .module('blocks.logger')
    .factory('logger', logger);

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

function logger($log, toaster) {

    var service = {
        error: error,
        info: info,
        success: success,
        warning: warning,

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

    return service;

    function error(message, title, data) {
        toaster.error({ title: title || 'Error', body: message, timeout: 6000 });
        $log.error(message, data);
    }
    //etc
}());

但是当我这样做时，我从注入(inject)器中得到一个循环依赖错误:Uncaught Error: [$injector:cdep]

我做错了什么？

编辑我发现问题与我使用的异常处理程序有关:

//code lifted from https://github.com/johnpapa/ng-demos (modular)
(function () {
    'use strict';

    angular
        .module('blocks.exception')
        .provider('exceptionHandler', exceptionHandlerProvider)
        .config(config);

    function exceptionHandlerProvider() {
        /* jshint validthis:true */
        this.config = {
            appErrorPrefix: undefined
        };

        this.configure = function (appErrorPrefix) {
            this.config.appErrorPrefix = appErrorPrefix;
        };

        this.$get = function () {
            return { config: this.config };
        };
    }

    function config($provide) {
        $provide.decorator('$exceptionHandler', extendExceptionHandler);
    }

    //function extendExceptionHandler($delegate, exceptionHandler, logger) {
    function extendExceptionHandler($delegate, exceptionHandler) {
        return function (exception, cause) {
            var appErrorPrefix = exceptionHandler.config.appErrorPrefix || '';
            var errorData = { exception: exception, cause: cause };
            var logMessage = appErrorPrefix + exception.message;
            $delegate(exception, cause);

            //logger.error(logMessage, errorData);
        };
    }
})();

通过注释掉记录器的使用，我可以在别处使用日志记录。但我也想在这里使用我的记录器。那么这是怎么回事，我该如何解决呢？

Answer 1

我找到了一个解决方案 - 在异常处理程序中使用 $injector:

//blocks/exception/exception.module.js
(function () {
    'use strict';
    angular.module('blocks.exception', ['blocks.logger']);
})();

//blocks/exception/exceptionHandlerProvider.js
(function () {
    'use strict';

    angular
        .module('blocks.exception')
        .config(exceptionConfig);

    exceptionConfig.$inject = ['$provide'];

    function exceptionConfig($provide) {
        $provide.decorator("$exceptionHandler", exceptionHandler);
    }

    exceptionHandler.$inject = ['$delegate', '$injector'];

    function exceptionHandler($delegate, $injector) {
        return function (exception, cause) {
            var logger = $injector.get('logger');
            logger.error(exception.message);
            $delegate(exception, cause);
        };
    }

})();

引用资料:

$log decorator with a service dependency causes circular dependency error

Angular style guide - exceptions