Typically, isolate scopes are best suited for stand-alone directives - those directives that should not be altered by anything external, with no outside influences or add-ons (including modifications made by using another directive on the same element).
Why is this important?
Imagine you have two directives with isolate scope on an element, each containing a property named cdmckay
:
<directive1 directive2 ng-show="cdmckay"></directive1>
Which directive's cdmckay
property takes precedence - the one from directive1
or from directive2
? Will the element be shown or hidden?
It's impossible to predict whether the value used will come from directive one or directive two. Although it may be feasible to merge multiple isolate scopes into a single scope if they do not share property names (and throw errors if they do), Angular is unlikely to pursue this option.
If your directives do not complement each other, a workaround is to use parent-child elements instead of stacking them:
<directive1 directive2></directive1>
Rather than:
<directive1>
<directive2></directive2>
</directive2>
Although this method may seem unconventional in some cases, when utilizing isolate scope, combining directives in this manner can be effective. However, if you anticipate extending directive1
with additional features, then consider building it without isolate scope on directive2
.
Providing a specific example would yield more tailored responses. Hopefully, this guidance sets you on the right track.
Brett makes a valid point about using multiple widgets:
Having a calendar widget and a listview widget (both implemented as directives with isolated scope) applied to the same element doesn't make much sense.