Using Angularjs-Toaster inside the decorator of $exceptionHandler

Question

I am trying to toast errors those are handled in the $exceptionHandler decorator as follows,

var app = angular.module('myApp',['toaster']);

app.config(function($provide){
  $provide.decorator('$exceptionHandler',function($delegate,toaster){
    toaster.pop('error','text','error');
    $delegate(exception, cause);
  });
});

Here is the plunkr. This is giving me the following error,

Error: [$injector:cdep] Circular dependency found: $rootScope <- toaster <- $exceptionHandler <- $rootScope

I am using AngularJS-Toaster for showing errors. How can I inject toaster service inside the decorator now?

Answer 1

You can inject the $injector into your decorator and wrap your injection in a function. This delays the injection of the toaster service until you invoke the $exceptionHandler, preventing a circular dependency.

var app = angular.module('myApp',['toaster']);

app.config(function($provide){
    $provide.decorator('$exceptionHandler',function($delegate,$injector){
        return function (exception, cause) {
            var toaster = $injector.get('toaster'); 
            toaster.pop('error','text','error');
        }
    });
});

To expand on why this is a circular dependency, you have to look at what is being required by both the injected service, as well as what is occurring in the decorator.

The toaster service has a dependency on $rootScope and is being injected into the decorator for for $exceptionHandler. However, $rootScope in turn has a dependency on $exceptionHandler. This ends up creating a circular reference.

You would find the same behavior if $http or $q was injected instead of toaster since they also have dependencies on $rootScope. it isn't toaster specifically that is the issue...rather it is the $rootScope dependency while trying to also apply behavior to a dependency of $rootScope.