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>

在我的角度应用中：

//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
}());

但是当我这样做时，我从注射器中得到一个循环依赖性错误：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

Answer 2

我想这是因为您从app模块调用模块依赖项，但实际上您正在blocks.logger上使用它。

angular.module('blocks.logger', ['toaster']);

而不是

 // remove toaster dependency
 angular.module('app', ['toaster','blocks.logger',/*etc*/]);

如何将多士炉库注入日志记录模块而不会在异常处理程序

2 个答案: