Javascript AngularJS:ng如果不与ng click一起工作？

使用AngularJS 1.2 rc3给出此测试用例：（重复如下）

一,

ng如果切换1:{{toggle1}}

打开
关掉
不起作用

二,

ng如果obj.toggle2:{{obj.toggle2}}

打开
关掉
那为什么这样做有效呢？

问题:

为什么1不起作用

我应该工作吗

2为什么起作用

2应该起作用吗

我可以依靠2在AngularJS的未来更新中工作吗

为什么1不起作用？：因为ngIf定义了自己的作用域，通常从其父作用域继承（就像ngRepeat一样）。因此，当您更改ngIf中某个字段的值时，您将在ngIf范围内更改它，而不是在其父范围内

1应该工作吗？：否

为什么2可以工作？：因为在这种情况下，您可以通过继承修改ngId范围引用的对象的内容

2应该工作吗？：是

我可以依靠2在AngularJS的未来更新中工作吗？：为什么不可以

这个范围继承机制在

1中有很好的解释。为什么1不起作用？

ng如果

创建一个新范围。这导致了本视频中解释的“奇怪”绑定行为：

二,。1应该工作吗？
从父作用域读取属性是可行的（原型链），但向作用域写入会在子作用域上创建一个新属性。创建断开连接的

三,。2为什么起作用？
从父作用域（obj）读取相同的属性。“写入ng”单击会更改“obj”对象，而不是范围

4/5。2应该起作用吗？我可以依靠2在AngularJS的未来更新中工作吗？
是，这是记录在案的预期行为

提示：

---

我使用Chrome扩展来了解哪些变量在哪个作用域上。

由于

ngIf

创建了自己的作用域，要使其工作，您可以在一个作用域中定义

toggle1

：

JS**

HTML

ng如果切换1:{{toggle1}}

打开
关掉
不起作用

---

参见演示

谢谢JB（和其他回答相同的人，但你是最快的）。我不知道ng是否创建了一个新的作用域。您也可以使用$parent使其工作

<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>

<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>

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

<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>