Let's say I've declared three class-restricted directives "am-wat", "am-foo", and "am-bar", that each augment the attached element with some behavior, e.g.:
<div am-wat="some data" am-foo="other data" am-bar="lol">
Yadda yadda yadda
</div>
Is there a way to write a directive that mixes in the behavior of the three directives, e.g.:
<div am-trifecta="trifecta args">
Yadda yadda yadda
</div>
such that the trifecta directive invokes the behavior of each of the three directives on that div, passing each directive some args that the trifecta directive came up with? Can it be done in without requiring an intermediate DOM element being added, which might complicated or screw up existing styles?
If you were using element-based directives, your choices would actually be a little more broad, oddly enough.
... let's assume all of the directives are element based, you could do something weird like this:
something like this might work:
but I'm actually not sure, I've never made anything like that.
In the end though, my "option 1" above and what @rpflorence is proposing above are probably sub-optimal, because you wouldn't be able to do that if the directives wat, foo, and bar were coming from an external module, as you wouldn't likely have access to their linking functions. So you'd probably need to use "option 2" above for what you're trying to do.
@rpflorence ... also, you wouldn't want to use
scope:{}
and isolate the scope here, since the three directives your applying will want to be able to get the parent scope.@machty ... other Angular weirdness, if any one of your directives wat, foo or bar, happened to isolate scope, you might see some strange behavior, as that scope may or may not be passed to one of the other directives, depending on the order in which the directives are applied.