[英]Angular.js circular dependency error in ui-router wrapper
I'm following John Papa's angular style guide ( https://github.com/johnpapa/angular-styleguide#routing ) and using a custom wrapper around the angular ui-router provided in this guide. 我正在关注John Papa的角度风格指南( https://github.com/johnpapa/angular-styleguide#routing ),并使用本指南中提供的角度ui-router周围的自定义包装器。 However, the wrapper does not work for me and I get a circular dependency error when injecting $state:
但是,包装器对我不起作用,并且在注入$ state时出现循环依赖性错误:
Uncaught Error: [$injector:cdep] Circular dependency found: $rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr <- logger <- $exceptionHandler <- $rootScope <- $state <- routerHelper
I have tried injecting $state manually using $injector but that gives me an unknown provider error. 我已经尝试使用$ injector手动注入$ state但这给了我一个未知的提供程序错误。
Here is the code: 这是代码:
(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();
}
}
}
})();
I think this is a problem with toastr and not the UI router code. 我认为这是toastr而不是UI路由器代码的问题。
John Papa bases his examples off the plain 'toastr' package and not the 'angular-toastr' package. John Papa将他的例子基于简单的'toastr'包而不是'angular-toastr'包。
toastr: https://github.com/CodeSeven/toastr toastr: https : //github.com/CodeSeven/toastr
angular-toastr: https://github.com/Foxandxss/angular-toastr angular-toastr: https : //github.com/Foxandxss/angular-toastr
With the 'toastr' package he registers the global instance of toastr using a constant: 使用'toastr'包,他使用常量注册toastr的全局实例:
.module('app.core')
.constant('toastr', toastr);
Which makes it available for injection into the logger service: 这使其可用于注入记录器服务:
logger.$inject = ['$log', 'toastr'];
/* @ngInject */
function logger($log, toastr) {
However if you use the angular-toastr package, the toastr object introduces a set of dependencies upon some angular objects: 但是,如果使用angular-toastr包,那么toastr对象会在一些角度对象上引入一组依赖关系:
$rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr
And this causes a circular dependency because the $rootScope has exception handling which uses the logger/toastr objects: 这会导致循环依赖,因为$ rootScope具有使用logger / toastr对象的异常处理:
toastr <- logger <- $exceptionHandler <- $rootScope
I wasn't sure how to properly refactor this to remove the circular dependency. 我不确定如何正确地重构这个以消除循环依赖。 So as a temporary workaround, I changed the logger service to delay resolution of the toastr dependency using $injector.
因此,作为临时解决方法,我更改了记录器服务,以使用$ injector延迟解析toastr依赖项。 Not ideal, but I was able to move on to other pressing concerns.
不理想,但我能够转向其他紧迫的问题。
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.