What scope does an element get if it has an ng-repeat and a custom directive with an isolate-scope?

[Deepak Nulu]

Hi,

I have a custom directive which uses an isolate-scope. This scope will not prototypically inherit from its parent scope. ng-repeat creates its own scope which does inherit prototypically from its parent scope. If I use both (ng-repeat and my custom directive) on the same element, only one scope gets created for the element, and it appears to me that it is the ng-repeat's scope. This scope inherits prototypically from the its parent. But the purpose of a directive's isolate-scope is to avoid this inheritance, right? So this means isolation of a directive's isolate-scope breaks when used with ng-repeat, right?

Thanks.

-deepak

[Josh David Miller]

Hello!

As I commented on Stack Overflow (http://stackoverflow.com/q/15623698/259038), the ngRepeat doesn't touch your isolate scope. Your directive still has an isolate scope. You can test this by trying to access a variable on the parent scope from within the directive - it won't work. Here's a demo: http://plnkr.co/edit/k6Ahttp://plnkr.co/edit/k6AemLY5KHaMWeXs9OLq?p=previewemLY5KHaMWeXs9OLq?p=preview. I think you're getting confused because of the concept that only one scope can exist for a given element; that's true, but ngRepeat isn't just a DOM element.

ngRepeat works by manually creating a new child scope programmatically for each repeated item. That scope does prototypically inherits from its parent, because otherwise it would have no way to assign variables with the same name, like "$index" and your repeater, to each element. They're copies of the same thing, so they must have their own (child) scopes. 

Your directive with an isolate scope is then created when it gets compiled when the node is attached to the DOM, which now exists within that child scope. But your directive still has an isolate scope because these two things occurred separately. The scopes are not mixed.

I hope this helps clarify.

Josh

-deepak

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Deepak Nulu]

Hi Josh,

Okay, I finally get it, thank you!

Yes, I was indeed confused about an element only getting one scope. Checking the HTML does not show additional elements, but Batarang shows the scopes. For each iteration, I see two nested scopes. The inner scope appears to be my directive's scope since it has a "models" link which shows the variables in my isolate-scope. The outer scope has no "models" link and I guess this is the scope introduced by ng-repeat.

Thanks again!

-deepak