AngularJS override service injection in some cases

Question

I have an angular service (let's call it $superService), and I use it in lots of my directives, controllers etc. But I also have one specific directive that I would like to have the following behaviour: If I place any other directive inside that specific one, and that directives use $superService in their own controllers, I want another instance of $superService to be injected there. Let me give you an example of how I do it now:

function SuperService(){
    this.action = function(){
        // some action
    }
}
var module = angular.module('module');
module.service('$superService', SuperService);
module.directive('oneDirective', function(){
    return {
         scope: {
             customSuperService: '='
         },
         // transulde, replace, restrict and other if needed
         controller: ['$scope', '$superService', function($scope, $superService){
             if($scope.attrs.customSuperService)
                  $superService = $scope.customSuperService;

             // code utilizing $superService
         }
         link: function($scope, $element, $attrs){
              $scope.attrs = $attrs;
         }
    };
}).directive('specificDirective', [function(){
    return {
         transclude: true,
         replace: true,
         scope: true,
         template: '<div ng-transclude></div>',
         compile: function(){
             pre: function($scope, $element, $attrs, $transclude){
                  $scope.customSuperService = new SuperService();
             }
         }
    };
}]);

So normally I would use oneDirective as follows:

<div one-directive></div>

But when i use it in specificDirective I have to write markup as this:

     <div specific-directive>
         <div one-directive custom-super-service="customSuperService"></div>
     </div>

Is there a better way to do this? Perhaps using custom service providers? I would want a solution in which i would write markup like this:

<div specific-directive>
    <div one-directive></div>
</div>

Without explicitly passing the custom instance to the directive.

Possible duplicate of How to redefine a module in angularjs? — Paul Sweatte
– Paul Sweatte, Commented Jun 23, 2016 at 18:39

null · Accepted Answer · 2014-01-09 12:58:45Z

1

The dependency injection configuration is global, which means that if you modify the instance to be injected for a certain argument it will be changed in every context; things will break.

It's not quite clear to me what you're trying to accomplish in the end, but if you want some different behaviour based on the nesting context of your directives you can always influence that by having a parent controller that is required by a child directive.

Services are singletons in Angular, but you can always let a singleton maintain an object hash with different contexts.

See this plunker as example.

answered Jan 9, 2014 at 12:58

null

7,9163 gold badges39 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS override service injection in some cases

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related