Angularjs ng-model ไม่ทำงานภายใน ng-if

นี่คือซอแสดงปัญหา http://jsfiddle.net/Erk4V/1/

มันจะปรากฏขึ้นหากฉันมี ng-model ภายใน ng-if โมเดลนั้นไม่ทำงานตามที่คาดไว้

ฉันสงสัยว่านี่เป็นข้อผิดพลาดหรือหากฉันเข้าใจผิดเกี่ยวกับการใช้งานที่เหมาะสม

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

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 ล่าสุดที่ฉันเพิ่ม

คุณสามารถใช้$parentเพื่ออ้างถึงโมเดลที่กำหนดในขอบเขตพาเรนต์เช่นนี้

<input type="checkbox" ng-model="$parent.testb" />

คุณสามารถใช้คำสั่งngHide (หรือ ngShow) มันไม่ได้สร้างขอบเขตของลูกอย่างที่ทำ

<div ng-hide="testa">

เรามีสิ่งนี้ในหลาย ๆ กรณีสิ่งที่เราตัดสินใจภายในคือมีเสื้อคลุมสำหรับตัวควบคุม / คำสั่งเพื่อให้เราไม่จำเป็นต้องคิดเกี่ยวกับมัน นี่คือตัวอย่างของเสื้อคลุมของเรา

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

<script>
    function main($scope) {
        $scope.thisScope = $scope;
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.testd = false;
    }
</script>

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

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

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="thisScope.testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="thisScope.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="thisScope.testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="thisScope.testd" />
        </div>

    </div>
</div>

ความหวังนี้ช่วยได้ Yishay

ใช่คำสั่ง ng-hide (หรือ ng-show) จะไม่สร้างขอบเขตลูก

นี่คือการปฏิบัติของฉัน:

<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.testd = false;
    }
</script>

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

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        Test D: {{testd}}<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="$parent.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="testd" />
        </div>

    </div>
</div>

http://jsfiddle.net/bn64Lrzu/

คุณสามารถทำได้เช่นนี้และฟังก์ชั่น mod ของคุณจะทำงานได้อย่างสมบูรณ์แบบแจ้งให้เราทราบหากคุณต้องการปากกาโค้ด

  <div ng-repeat="icon in icons">                   
                <div class="row" ng-if="$index % 3 == 0 ">
                    <i class="col col-33 {{icons[$index + n].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 1].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 2].icon}} custom-icon"></i>
                </div>
         </div>