Question

鉴于此测试案例使用AngularJS 1.2 rc3：http://plnkr.co/edit/MX6otx（下面重复）

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>

问题：

为什么1不起作用？
1应该有效吗？
为什么2有效？
2应该工作吗？
我可以依赖2来处理AngularJS的未来更新吗？

Answer 1

为什么1不起作用？：因为ngIf定义了自己的范围，原型继承自其父范围（就像ngRepeat一样）。因此，当您更改ngIf中的字段值时，您可以在ngIf范围内更改它，而不是在其父范围内。
1应该有效吗？：否
为什么2有用？：因为在这种情况下，您可以通过继承来修改ngId范围引用的对象的内容。
2应该有效吗？：是
我可以依赖2来处理AngularJS的未来更新吗？：为什么不应该这样做？

此范围继承机制在https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

由于ngIf创建了自己的范围，为了使其工作，您可以在一个范围内定义toggle1：

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>

参见演示 Plunker

Answer 3

1。为什么1不起作用？
ng-if创建了一个新范围。这导致了“奇怪的”绑定行为，如本视频中所述：http://egghead.io/lessons/angularjs-the-dot

2。 1应该有效吗？
从父作用域读取属性（原型链），但写入作用域会在子作用域上创建一个新属性。创建一个断开连接的

3。 2为什么有效？
从父作用域（obj）读取相同的属性。写入ng-click会更改“obj”对象，而不是范围。

4/5。 2应该工作吗？我可以依赖2来处理AngularJS的未来更新吗？
是，这是记录的预期行为。

提示我使用Chrome扩展程序AngularJS Batarang来深入了解哪个变量位于哪个范围内。

AngularJS：ng-如果不与ng-click结合使用？

3 个答案: