AngularJS ng-model在ng-if裏面無效

參考stackflow原文。

問題：

Here is the fiddle showing the problem. http://jsfiddle.net/Erk4V/1/

It appears if I have an ng-model inside of an ng-if, the model does not work as expected.

I am wondering if this is a bug or if I am misunderstanding the proper usage.

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

回答：

The ng-if directive, like other directives creates a child scope. See this fiddle:http://jsfiddle.net/Erk4V/4/

So, your checkbox changes the testb inside of the child scope, but not the outer parent scope.

Note, that if you want to modify the data in the parent scope, you'll need to modify the internal properties of an object like in the last div that I added.

 

 

我的解釋：ng-if裏面會生成一個子域，想要ng-model生效，須要在$scope建立一個子對象，才行，如$scope.obj，再將ng-model綁定到obj

使用ng-show(或ng-hide)能夠間接解決這個問題。