Search code examples
angularjsscopedirectivenextsibling

AngularJS: what is the relationship between an isolate scope and transclude scope for a collection of the same directive


A small question about $$nextSibling. I've seen a lot of articles similar to this one that say that the relationship between a directive with isolate scope and transclude scope is through $$nextSibling. This seems to be correct if there is only one instance of the directive. However, I have a collection directive that contains items which are also directives e.g.

<items><item id="1"/><item id="2"/></items>

and this creates 4 sibling scopes but in this order: item 1 isolate, item 2 isolate, item 1 transclude, item 2 transclude. In this case you need $$nextSibling.$$nextSibling which is very unsatisfactory.

Is there a cleaner way to reference between the isolate and transclude scopes?

I am trying to make self contained controls that 'emit' messages to be received by the first parent directive that is listening for that message. I'm finding that the messages are received by the transclude scope of the parent and not the isolate scope (which I understand and is fine). The problem comes in because my parent controls 'model' is on the isolate scope so taking action after receiving the message means interaction between the transclude scope and the isolate scope - normally via $$nextSibling. However, as described above this is not predictable once you start to have collections.

Thanks.


Solution

  • The answer to this is version dependent. I was running on v1.2.0 of angular. In this version sibling scopes are not correctly ordered so that $$nextSibling is NOT reliable. After installing v1.2.7 this is now fixed and the sibling scopes are listed in the correct order with the transclude scope always following the isolate scope.

    From an initial read through of the version change log it is not immediately obvious which fix resolved this issue so I'm not sure what the earliest version of Angular that resolves this issue is.