O ng-model do Angularjs não funciona dentro do ng-if

206

Aqui está o violino mostrando o problema. http://jsfiddle.net/Erk4V/1/

Parece que se eu tiver um modelo ng dentro de um ng-if, o modelo não funcionará conforme o esperado.

Gostaria de saber se isso é um bug ou se estou entendendo mal o uso adequado.

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

angularjs

— Justin Carlson
fonte

6

Para uma solução alternativa, você pode usar ng-show = "CONDITION" em vez de ng-if. Deveria funcionar.

— Hari Das

Presumo que isso não é mais um problema agora que se pode usar controllerAs?

— 21716 Jamiebarrow

Eu tive o mesmo problema ao usar uma directiva com implícita scope:falsee acrescentei ng-ifelemento em torno da directiva - os âmbitos eram obrigados inicialmente, mas eles se separaram depois de um observador atualizadas um dos valores de escopo ...

— Aprillion

223

A ng-ifdiretiva, como outras diretivas, cria um escopo filho. Veja o script abaixo (ou este 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>

Expandir snippet

Portanto, sua caixa de seleção altera o testbinterior do escopo filho, mas não o escopo pai externo.

Observe que, se você quiser modificar os dados no escopo pai, precisará modificar as propriedades internas de um objeto, como na última div que eu adicionei.

— Jon7
fonte

1

Como eu acessaria o escopo do ng-if a partir da função dos controladores principais? Um pouco frustrante. Qual o motivo disso?

— 23813 Justin Carson

Deixa pra lá, @sza acabou de responder a essa pergunta. Vou marcar esta resposta como correta, pois explica o motivo exato pelo qual eu estava tendo problemas.

— Justin Carlson

21

Esse é um dos motivos pelos quais é bastante comum usar um objeto que contenha seu escopo, em vez de modificar diretamente as propriedades do escopo, como apontado no exemplo: $scope.obj = {...}e ng-model="obj.someProperty"supera essa limitação.

— Wulftone 22/10

204

Você pode usar $parentpara se referir ao modelo definido no escopo pai como este

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

— zs2020
fonte

16

então eu tenho ng-model="$parent.$parent.fooporque eu já estou dentro de um escopo com um ng-repeat- este é realmente o melhor caminho?

— Chovy

4

isso é realmente confuso. por que é que? e por que o ng-hide não tem escopo próprio?

— Dominik Goltermann 03/03

5

Re @Gaul: presumivelmente porque ng-hide / ng-show opera no DOM atual e apenas adicione / remova uma classe CSS, enquanto ng-if / ng-switch / ng-repeat todo o lixo com o DOM e acompanhe o estado extra . Parece sensato.

— trisweb

4

Sensível não é a palavra que eu uso.

— Jonathan Dumaine

3

Adicione um objeto ao escopo original e altere as propriedades desse objeto. por exemplo, ng-model = "myObject.property". Isso contornará toda a escopo / $ inanity pai. Google "regra de ponto angular" para mais informações.

— Asmor 16/02

50

Você pode usar a diretiva ngHide (ou ngShow) . Não cria escopo filho como ngIf.

<div ng-hide="testa">

— Vasiliy Kevroletin
fonte

3

Por que, ngIfentão, cria um escopo filho? Parece muito estranho para mim.

— freeall

5

Preste atenção aos comentários da resposta zsong. ng-hidenão altera a estrutura html. Simplesmente muda os estilos de CSS. ng-ifé mais complexo: remove e insere peças html, dependendo da condição. Ele cria o escopo filho para armazenar o estado (pelo menos deve armazenar parte html oculta).

— Vasiliy Kevroletin

Sim, trabalhe para mim

— Basit 02/04

7

Tivemos isso em muitos outros casos, o que decidimos internamente é sempre ter um wrapper para a diretiva / controlador, para que não precisemos pensar sobre isso. Aqui está seu exemplo com nosso invólucro.

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

Espera que isso ajude, Yishay

— Yishay Haspel
fonte

3

Sim, a diretiva ng-hide (ou ng-show) não criará escopo filho.

Aqui está a minha prática:

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

— Xiayan Y
fonte

0

Você pode fazer assim e sua função mod funcionará perfeitamente, deixe-me saber se você quer uma caneta de código

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

— Xvegas
fonte