Using two Angular directives on the same element

Question

I'm using two directives to optimize the image loading on my application.

The first is called srcResponsive (which choose the format image to load according to the width/heifght of my page), the second one is called lazySrc (allow to load image only if it's visible on the page).

When I use them seperatly it works well :

<img src-responsive="[['small', '{{picture.small}}'], ['medium', '{{picture.medium}}'], ['large', '{{picture.large}}']]" />

<img lazy-src="{{server_address}}{{tweet.picture.medium}}" />

But I want to use them on only one img element, that is to say apply the two directives without having to change the code of my two directives, in order to let them independent.

Is it possible ?

Thank you

Answer 1

Since they both update the src in creative ways, it will be difficult to use them both without them knowing about each other.

It feels to me like the best way is to combine the directives into one directive with optional parameters. Let's call it optimal-src. You'd use it something like this:

<img optimal-src="{{defaultUrl}}" src-responsive="[...]" /> // only use responsive features
<img optimal-src="{{defaultUrl}}" lazy /> // use only the lazy features
<img optimal-src="{{defaultUrl}}" src-responsive="[...]" lazy /> //use both

Answer 2

Maybe it helps to know that:

Directives may have a priority attribute (priority: 0,). So, the higher the priority (not sure if higher or lower wins...), the sooner it will be processed. So if one element has two directives on it, the priority will decide who comes first. (http://amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-to-the-directive/ see "Blueprint")

Directives may use other directives internally. I don't have quite a good example. But Angular UI Bootstrap PopOver take use of Angular UI Bootstrap Tooltip - maybe that helps. https://github.com/angular-ui/bootstrap/blob/master/src/popover/popover.js