Angularjs ng-model은 ng-if 내에서 동작하지 않습니다.

Angularjs ng-model은 ng-if 내에서 동작하지 않습니다.

여기 문제가 있는 바이올린이 있습니다.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>

그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) 디렉티브를 사용할 수 있습니다.ngIf처럼 하위 범위를 만들지 않습니다.

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

이게 도움이 되길 바라, 이세이

네, 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/

이렇게 할 수 있고 모드 기능은 완벽하게 작동할 것입니다. 코드펜을 원하시면 알려주세요.

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

언급URL : https://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if