Can you extend a directive?

[jeffau...@ymail.com]

Can one directive inherit from another directive?

[Vojta Jína]

You can not inherit a directive, however, you can composite directives.

Directives can communicate through its controller or scope

V.

On Sat, Jun 16, 2012 at 9:05 AM, <jeffau...@ymail.com> wrote:

Can one directive inherit from another directive?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/AJkw-hk-R4cJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Mark]

Can you provide an example or a link to documentation about creating composite directives?

Thanks.

[Dave Merrill]

Here's a good quick presentation on directive to directive communication by John Lindquist:

  http://egghead.io/video/angularjs-directive-to-directive-communication/

Dave Merrill

[Laimonas Turauskas]

Thanks a lot Dave!

Videos in that website have been very helpful.

Cheers!

[BrainCrumbz]

I know this is an old thread, but I've seen the same kind of request somewhere else.

Thinking about this issue, it might be interesting to actually reuse part of a directive. We were thinkering with an approach like the one shown in this gist: https://gist.github.com/BrainCrumbz/5808422

The idea is to:
- conceal the actual directive behaviour in a separate JS "class",
- store that in an Angular Module value,
- inject that value into an Angular directive, and then
- just have the directive factory function return the constructed instance of the "class".

We tried, and that seems to work fine.
After that, I guess one can just inherit from the core code and extend that as a regular JS "class" with new behaviours, and inject the new class into another directive "wrapper". We didn't thought about it, but prototypal inheritance as well should be possible.

Any thought about it?
TA

[BrainCrumbz]

here's a more complete update: https://gist.github.com/BrainCrumbz/5832057

it shows the "framework" to create two directives, each one with a separate class implementing core code, where one of the core object inherits from the other.

[Andy Joslin]

I would avoid inheritance if you can - javascript & AngularJS aren't meant to be treated 'object oriented'.

Try a service/controller sharing?

[ganaraj p r]

Every directive is stored as a service actually.

So if you want ng-repeat you can get it out as "ngRepeatDirective", inject that into your directive which will give you the directive definition object of ng-repeat.

Override its linking function will work as inheritance basically. I have an example of doing this for ng-repeat but I am not able to get hold of my plunker list from here for some reason!

Though, I have to admit, this doesnt feel elegant. It "feels" like a hack!

On Fri, Jun 21, 2013 at 5:20 PM, Andy Joslin <andyt...@gmail.com> wrote:

I would avoid inheritance if you can - javascript & AngularJS aren't meant to be treated 'object oriented'.

Try a service/controller sharing?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Regards,
Ganaraj P R

[BrainCrumbz]

Thanks Andy, Ganaraj for your feedbacks.

That is one of the points: it would feel like a hack.
We have a custom directive (wrapping a 3rd party jQuery plugin).
For some usage, this directive is ok.

Then there are some other special use cases, and stuffing more behaviours into that directive seems wrong.
So there you have it: typical needs for a derived class:

It has most of the same behaviours, and then some more. Composition does not fit, I think. Nor does service injection.

Also the link function, does not need to be totally overridden, but just in some points (think of template method pattern).

So the best way seems to be inheritance.
Maybe there's a simpler way to gain this result, but it feels wrong to me that we should copy, paste and slightly change the link function, or whatever other function needed for the directive.
Any thoughts on such a simpler way?

[Tom Alon]

Ganaraj P R, by any chance, did you manage to hold of your Plunker example? Thanks a lot!

[ganaraj P R]

I have .. But like I said its a hack.. Its an experiment at best. 

http://plnkr.co/edit/GEWhCNVMeNVaq9JA2Xm2?p=preview