如何注入烤麪包機庫到日誌模塊沒有異常處理

Question

我已經加入了AngularJS，烤麪包機庫，我的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*/]);