AngularJS: ng-if not working in combination with ng-click?

Question

Given this test case using AngularJS 1.2 rc3: http://plnkr.co/edit/MX6otx (repeated below)

1.

<li ng-init="toggle1 = false">
    ng-if toggle1: {{ toggle1 }}
    <p>
        <button ng-if="!toggle1" ng-click="toggle1 = true">Turn On</button>
        <button ng-if="toggle1" ng-click="toggle1 = false">Turn Off</button>
        does not work
</li>

2.

<li ng-init="obj={toggle2:false}">
    ng-if obj.toggle2: {{ obj.toggle2 }}
    <p>
        <button ng-if="!obj.toggle2" ng-click="obj.toggle2 = true">Turn On</button>
        <button ng-if="obj.toggle2" ng-click="obj.toggle2 = false">Turn Off</button>
        then why does this work?
</li>

Questions:

Why does 1 not work?
Should 1 work?
Why does 2 work?
Should 2 work?
Can I rely 2 to work in future updates of AngularJS?

You could use $parent to get it working as well – AturSams Sep 28 '14 at 06:36 — AturSams, Sep 28 '14 at 06:36

JB Nizet · Accepted Answer · 2015-10-07T17:05:39.553

28

Why does 1 not work?: Because an ngIf defines its own scope, which prototypically inherits from its parent scope (just like ngRepeat). So, when you change the value of a field inside an ngIf, you change it in the ngIf scope, and not in its parent scope.
Should 1 work?: No
Why does 2 work?: Because in that case you modify the content of an object which is referenced by the ngId scope, through inheritance.
Should 2 work?: Yes
Can I rely 2 to work in future updates of AngularJS?: Why shouldn't you?

This scope inheritance mechanism is explained very well in https://github.com/angular/angular.js/wiki/Understanding-Scopes

edited Oct 07 '15 at 17:05

answered Nov 06 '13 at 12:34

JB Nizet

678,734
91
1,224
1,255

Thanks JB (and others with same answer, but you were the quickest). I was not aware that ng-if created a new scope. – Blaise Nov 06 '13 at 12:57

score 5 · Answer 2 · answered Nov 06 '13 at 12:38

Since ngIf creates own scope, to make it work you can define toggle1 in one scope:

JS**

$scope.toggleMe = function(){
     $scope.toggle1 = !$scope.toggle1;
    }

HTML

<li ng-init="toggle1 = true">
        ng-if toggle1: {{ toggle1 }}
        <p>
            <button ng-if="toggle1"  ng-click="toggleMe()">Turn On</button>
            <button ng-if="!toggle1"  ng-click="toggleMe()">Turn Off</button>
            does not work
    </li>

See Demo Plunker

Bob Fanger · Answer 3 · 2013-11-06T12:45:45.183

1. Why does 1 not work?
ng-if creates a new scope. which causes the "weird" binding behavior as explained in this video: http://egghead.io/lessons/angularjs-the-dot

2. Should 1 work?
Reading properties from the parent scope works (prototype chain), but writing to the scope creates a new property on the child scope. Creating a disconnected

3. Why does 2 work?
The same property is read from the parent scope (obj). The write in ng-click changes the "obj" object, not the scope.

4/5. Should 2 work? Can I rely 2 to work in future updates of AngularJS?
YES, this is the documented expected behavior.

Tip: I use the Chrome extension AngularJS Batarang to gain insights about which variables are on which scope.

AngularJS: ng-if not working in combination with ng-click?

3 Answers3

Linked