Why does ng-if create a child scope?

[Brian Genisio]

Does anyone know why ng-if creates a child scope for the transcluded content?

I was expecting ng-if and ng-show to be very similar to each other in behavior where one removes the element and the other just hides it.  I was very surprised to find out that ng-if creates a child scope but ng-show does not.  Semantically, this seems inconsistent to me.  At the same time, I am sure there is a good design/philosophy reason for this to be the case.  

I am very curious, for my own edification, to know what the reason/benefit is for ng-if to create new child scopes.

Thanks!

Brian

[umi]

I'm guessing it's necessary to create a new scope since ngIf removes elements from the DOM and recreates them based on the test.

ng-show/hide just change visibility.

[Brian Genisio]

But removing the elements doesn't require a new scope, does it?  Why can't the original $scope be used when the transclusion happens?  

I did a little test, modifying the existing ng-if to not create a child scope, and it (seemingly) works fine.  https://gist.github.com/BrianGenisio/6621396  

This feels to me like a philosophical decision which I don't understand. Note that I am not criticizing the decision... just that I am trying to understand it.  I understand why ng-repeat creates new child scopes.  I understand why ng-show does not.  But I don't understand why ng-if creates new child scopes.  It breaks the semantic model, from the way I understand it.  I'm trying to fill in the gap in my understanding.

Thanks,

Brian

P.S. My testing grounds for this is here: http://codepen.io/BrianGenisio/pen/pLjBf

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/kPRzdcrIzNw/unsubscribe.
To unsubscribe from this group and all its topics, 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.
For more options, visit https://groups.google.com/groups/opt_out.

[umi]

Hello Brian,

You are correct there's no reason the same scope can't be used. 

I dug up an old post which asked why ng-switch needs to create a new scope:

https://groups.google.com/forum/#!searchin/angular/why$20does$20ng-switch/angular/n_PlBtwemJg/kk6me3JdE88J

There's a reply from Misko in the thread explaining why and I believe the reasoning is the same in this case.

To put it differently whenever DOM structure changes, a new scope needs to be created, so that we can properly clean up after ourselves.

[Brian Genisio]

Ok, that helps.  Thank you.  

It is unfortunate, because this is really an implementation detail which gets exposed to the abstraction.  I'd argue that ng-switch and ng-if should solve this problem a different way to avoid creating child scopes.  It would allow for a cleaner abstraction IMO.  That will never happen, however.  It would break existing code.  

Soooo... I'm glad I know WHY it works this way.  Now I can either program against it (defensively) by referencing fields on objects, or know that it an issue and use ng-show or $parent.field.

Thanks,

Brian