Angular-使用ngNotificationsBar时发现循环依赖

Question

I try to use ng-notifications-bar module, I have code like this:

angular.module('app', [
    uiRouter,
    Common.name,
    Components.name,
    angularMaterial,
    'ngTable',
    'gridster',
    'ngNotificationsBar'
  ])
  .factory('$exceptionHandler', ['notifications', function(notifications) {
    return function(exception, cause) {
      notifications.showError({message: exception});
    };
  }]);

but got error:

[$injector:cdep] Circular dependency found: $rootScope <- notifications <- $exceptionHandler <- $rootScope <- $timeout <- $$rAF <- $mdGesture

I've tried to modify the library to use $injector to get $timeout and $rootScope but that didn't help also tried to use $injector to get notifications in $exceptionHandler factory but got the same error.

Answer 1

Pretty poor design from angular it looks on this one. You can't inject $rootScope in any form into $exceptionHandler due to the dependency.

You can use $injector to get around these kinds of (out-of-your-hands) dependency problems, you just need to make sure that the injected module is used inside the return function to ensure that at the time of calling .get() the dependent module has actually loaded. For example:

// won't not be available here
var rootScope = $injector.get('$rootScope');

return function(exception, cause) {
  // will be available here
  var rootScope = $injector.get('$rootScope');
};

This is because $injector is used to grab the dependency at run time.

Answer 2

There is a nice clean object-oriented design to avoid circular dependencies: use the dependency inversion principle . Create a generic service to which you can attach handlers, and set it up from a run block. Basically all the other solutions suggest something similar, but with using global variables outside of angular, or bypassing the automatic dependency injection.

 angular.module("App", []) .factory("notifications", function($rootScope) { $rootScope.notifications = []; function showMessage(msg) { $rootScope.notifications.push(msg); } return { showMessage }; }) .factory("$exceptionHandler", function(MyExceptionService) { return function(e, cause) { MyExceptionService.fire(e, cause); }; }) .factory("MyExceptionService", function() { const handlers = []; return { addHandler(h) { handlers.push(h); }, fire(e, cause) { handlers.forEach(h => { h(e, cause); }) } }; }) .controller("MyCtrl", function($scope) { $scope.clicked = () => { throw new Error("Error made"); }; }) .run(function(MyExceptionService, notifications) { MyExceptionService.addHandler(err => { notifications.showMessage({ message: err.message }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> <div ng-app="App" ng-controller="MyCtrl"> <button ng-click="clicked()">Make Error</button> <div>Errors:</div> <div ng-repeat="item in notifications">{{item}}</div> </div> 

For comparison, here is the wrong one (with the circular dependency):

 angular.module("App", []) .factory("notifications", function($rootScope) { $rootScope.notifications = []; function showMessage(msg) { $rootScope.notifications.push(msg); } return { showMessage }; }) .factory("$exceptionHandler", function(notifications) { return function(e, cause) { notifications.showMessage({ message: err.message }); }; }) .controller("MyCtrl", function($scope) { $scope.clicked = () => { throw new Error("Error made"); }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> <div ng-app="App" ng-controller="MyCtrl"> <button ng-click="clicked()">Make Error</button> <div>Errors:</div> <div ng-repeat="item in notifications">{{item}}</div> </div>