Angularjs NG-模式行不通内NG-如果 [英] Angularjs ng-model doesn't work inside ng-if

问题描述

下面是该问题的小提琴。 http://jsfiddle.net/Erk4V/1/

如果我有内部的NG-模型它出现NG-如果按预期的模式是行不通的。

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

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT; D​​IV NG控制器=主＆GT;        试验A：{{种皮}}＆LT; BR /＆GT;
        试验B：{{TESTB}}＆LT; BR /＆GT;
        测试C：{{TESTC}}＆LT; BR /＆GT;        ＆LT; D​​IV＆GT;
            种皮（不NG-IF）：其中，INPUT TYPE =复选框NG模型=种皮/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV NG-IF =＆GT种皮！
            TESTB（与NG-IF）：其中，INPUT TYPE =复选框NG模型=TESTB/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV NG-IF =＆GTsomeothervar！;
            TESTC（与NG-IF）：其中，INPUT TYPE =复选框NG模型=TESTC/＆GT;
        ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

的 NG-如果指令，像其他指令创建一个子范围。看到这个小提琴： http://jsfiddle.net/Erk4V/4/

所以，你的复选框改变了 TESTB 子范围内，而不是外父范围。

请注意，如果你想修改父范围中的数据，您需要在我添加的最后一个div来修改对象的内部属性等。

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.

这篇关于Angularjs NG-模式行不通内NG-如果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！