ng-if prevents two way binding inside directive

[warnerandy]

I'll place a plunkr link later, but when using a two way bound ('=') var inside a directive. If the variable is inside the ng-if the variable changes do not seem to make it outside of the ng-if block.

[pkozlowski-opensource]

ng-if directive is creating a new scope, so I'm pretty sure that you are bumping into a scope-related issue.
Post a plunker, it is next to impossible to help you without live reproduce scenario.

[pkozlowski-opensource]

@warnerandy Haven't hear from you so going to close this one for now. Please re-open when you've got reproduce scenario.

[mcferren]

I am also having trouble with this issue - here is my plunkr: http://plnkr.co/edit/I7ibaj66hLX7uAgfENdk

If you comment out the ng-if in the <div class="projectBlock" you will see that the OUTSIDE DIRECTIVE input and the INSIDE DIRECTIVE input stay in synch. But with the ng-if, it is unable to propagate changes from the INSIDE DIRECTIVE input.

Funny though that when the ng-if is in place, the sidebarState button function correctly and stay in synch. Maybe bc they deal with booleans and the inputs deal with string values.

Perhaps ng-if creates its own isolated scope? Can you think of any alternatives to using ng-if or any other work arounds? From my master code set, it appears as though I am also having the same issues within an ng-switch as well.

I am very grateful for any insight you can provide.

All the best,

Ben

[leostera]

Use $parent.property from within the ng-ifed element.

From the docs:

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypal inheritance.

[joelcardinal]

Thanks Leostra, that tip helped me today!

[fiznool]

Thanks from me too, good tip.

[honkskillet]

I had this problem too. When I used ng-if in the parent html template, say,...

<button ng-if="shouldShow" ng-click="functionOnDirectiveScope()">
  Press me.
</button>

when the app ran, ng-isolate-scope would not be attached to the button. Instead, ng-scope would be attached. The result is that `functionOnDirectiveScope()`` would not get called. I almost went crazy looking at the js to find my error. Then I realized that if I wrapped all my html in a

it would work because ng-if wasn't on the highest level element. My 'solution' (really just avoiding the bug) was to swap out ng-show for ng-if.

[MarkOdey]

I know that this issue is closed. But the ng-if still doesn't behave as expected and in some case it would be more proper to not have to target the parent scope espacilly when you are trying to inherit the scope of a directive by the parent scope.

anyways ng-if could be useful but I wont be using it for now as it doesn't work too well for my application unless this gets fix.

Maybe reopening this issue could be one step?

Mark

[Kaiser1989]

This issue took me 3 hours ... with ng-if input inside a directive.