If Angularjs - Multiple directives on element with one being isolate scope is right, the isolated scope is bound to the directive, so why would there be any clashes? The documentation for this error states that processing them would result in a collision or an unsupported configuration
. I don't buy this. Multiple directives already share the element's scope, which is surely where clashes/unsupported configurations would come in. I've tried looking for the "why" on this, but have come up empty handed.
Can someone explain / give an example where this would indeed create a collision or an unsupported configuration?
The answer is simple - there needs to be only one scope to bind the child elements to (see source), because assignments to scope properties done in descendant elements need to have a clear target. The rest is a question of wording.
While it is appropriate, in a way, to refer to the isolate scope being created "for that particular directive" (as the linked answer does), it is only in the sense that the directive that requested the isolation is the only one of the directives on that element to have access to the isolated scope. So, the scope is created to isolate the directive and the child elements from the rest of that "level" of DOM.
Giving multiple directives the same isolated scope would risk a clash of scope binding configurations (multiple directives could try to bind to the same property on the isolated scope).
A simple and compelling argument is that the {{interpolated.expressions}}
on an element need to be evaluated against the same scope as plain expressions
(supplied to directives that support them), otherwise the whole thing would be a total mess. (Interpolation of {{expressions}}
is done separately, so a directive accepting a plain expression
in one attribute and String
in another could be configured with expressions evaluated against different scopes.)
If they really need to, they can access the isolated scope (but this needs Debug Data to be enabled). If they have lower priority than the directive creating the isolate scope, they can just use element.isolateScope()
in their linking function (see demo).