Element does not get isolate scope if highest priority directive does not have one

4
votes

Is it correct that angular does not create an isolate scope for a element that has two directives on it where the highest priority directive does not have an isolate scope and the lower priority directive does?

I have the following plunker that has 2 directives and a controller:

http://plnkr.co/edit/zEnMH6h0ILURHSgx0DLX?p=preview

If you open up the console, you can see the logs of the scopes of the directives and controller. The noIsoScope directive does not have a isolate scope and has a priority of 1. The isoScope scope directive has an isolate scope but a priority of 0. When I use each directive independently, everything works as excepted. When I use both of them together, the isoScope directive shows that is it using the controller scope (since based on the logs, it has the same $id) instead of its own.

Do I have to make sure that whenever I am using multiple directive on an element, if one of them has an isolate scope, that it has to have the highest priority?

1
angularjsangularjs-directiveangularjs-scope

1 Answers

1
votes

Short answer yes.

It doesn't make sense to have 2 directives require both an isolate scope AND a parent scope. The idea would be to think about how directive can work with each other. How would the parent scope directive work correctly if the scope it has is the isolate scope?

I guess the angular team decided to not give a warning in this situation(could be a bug).

  • if the lower priority requires a isolate scope that means it has a strict requirement of data from parent scopes
  • if the higher priority doesn't require a scope that means it will inherit the parent scope and potentially use that data in the template.

This is a catch 22 situation: It doesn't make sense that the non isolate directive use a isolate scope since it might depend on the fact that it's not isolate. At the same time the isolate directive most likely depends on the fact that it's isolate.

From Igor Minar, he's talking about multiple isolate scopes but it's the same issue basically:

My suggestion is to use isolate scopes when you are creating reusable components that are backed by a template. If you want to compose multiple directives together, you should design them in a way that make one directive the main one (with the template) and the other directives are just helper directives (sort of like traits or mixins in some programming languages).