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

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. 1应该工作吗？
3. 为什么2有效？
4. 2应该工作吗？
5. 我可以依赖2在AngularJS的未来更新中工作吗？

Answer 1

1. 为什么1不起作用？:因为ngIf定义了自己的范围,它原型继承自其父范围(就像ngRepeat一样).因此,当您更改ngIf中的字段值时,您可以在ngIf范围内更改它,而不是在其父范围内.
2. 1应该工作吗？:不
3. 为什么2有效？:因为在这种情况下,您可以通过继承修改ngId范围引用的对象的内容.
4. 2应该工作吗？:是的
5. 我可以依赖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