Angular.js Directive controller inheritance

Question

Assume that I have a directive:

.directive('money', ['Service', function (Service) {
/*
* Some code
*/
controller: ['$scope', '$element', '$attrs', '$parse', function (scope, cElement, attrs, $parse) {
    scope.someValue=1;
    scope.someFunction = function(){
        console.writeline('money');
    }
}

and there is a second directive:

 .directive('cash', ['Service', function (Service) {
    /*
    * Some code
    */
    controller: ['$scope', '$element', '$attrs', '$parse', function (scope, cElement, attrs, $parse) {
        scope.someValue=1;
        scope.someFunction = function(){
            console.writeline('cash');
        }
    }

As you can see only difference between those two directives is content of a one function. So perfect way would be inherit all the controller and shadow that someFunction

Is it even possible in angular to make something like this or I should leave two directives with so small diferences?

Isn't it possible to use only one directive and bind the different values with isolated scopes? — A. Rodas
– A. Rodas, Commented Jul 7, 2015 at 12:29
unfortunately there is a requirement that I should have two directives — szpic
– szpic, Commented Jul 7, 2015 at 12:34

kiswa · Accepted Answer · 2015-07-07 12:43:14Z

1

Why not just have a console directive that grabs what to write from an attribute on the directive's element?

So, instead of a <div data-money></div> and <div data-cash></div> You'd have <div data-console text="money"></div> and <div data-console text="cash"></div>.

Basically, pull what's different into attributes that can be brought into a more generic directive.

Based upon comments, how about this? Create the controller as a standalone function, then use that same controller in both directives.

At this point though, I'm not sure it's going to save you much (or any) code and may be overkill for this refactoring. Considering the minor differences, it may make more sense to just keep it the way you have it.

edited Jul 7, 2015 at 12:43

answered Jul 7, 2015 at 12:30

kiswa

15k1 gold badge23 silver badges30 bronze badges

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

4 Comments

szpic Over a year ago

Unfortunately there is a requirement that that need to be two directives.

kiswa Over a year ago

That's a very specific and odd requirement. Is this some kind of homework?

szpic Over a year ago

No I'm already after school years :) At this moment this is working as one directive and depending on the parameter but it was rejected as a error prone.

kiswa Over a year ago

Interesting. I assume the errors it's prone to are human (not updating the attribute?). I guess if you have to work within those requirements your hands are somewhat tied.

Community · Accepted Answer · 2017-05-23 10:28:58Z

0

Yes, there are options for inheritance, It was discussed here before: AngularJS controller inheritance

Edit: in addition you can take the common functionality and share it through an injected service, the variations may be passed as a parameter.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 7, 2015 at 12:30

OfirYaron

1571 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angular.js Directive controller inheritance

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related