AngularJS ng-model在ng-if内部不起作用

Question

这是显示问题的小提琴。http://jsfiddle.net/Erk4V/1/

如果我在ng-if内部有一个ng-model，就会出现该模型无法正常工作的情况。

我想知道这是一个错误还是误解了正确的用法。

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="testb" />
        </div>
        <div ng-if="!someothervar">
            testc (with ng-if): <input type="checkbox" ng-model="testc" />
        </div>

    </div>
</div>

Answer 1

ng-if与其他指令一样，该指令将创建子范围。请参见下面的脚本（或此jsfiddle）

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>



<script>

    function main($scope) {

        $scope.testa = false;

        $scope.testb = false;

        $scope.testc = false;

        $scope.obj = {test: false};

    }

</script>



<div ng-app >

    <div ng-controller="main">



        Test A: {{testa}}<br />

        Test B: {{testb}}<br />

        Test C: {{testc}}<br />

        {{obj.test}}



        <div>

            testa (without ng-if): <input type="checkbox" ng-model="testa" />

        </div>

        <div ng-if="!testa">

            testb (with ng-if): <input type="checkbox" ng-model="testb" /> {{testb}}

        </div>

        <div ng-if="!someothervar">

            testc (with ng-if): <input type="checkbox" ng-model="testc" />

        </div>

        <div ng-if="!someothervar">

            object (with ng-if): <input type="checkbox" ng-model="obj.test" />

        </div>



    </div>

</div>

因此，您的复选框将更改testb子作用域的内部，而不更改外部父作用域。

请注意，如果要修改父作用域中的数据，则需要像我添加的最后一个div一样修改对象的内部属性。