ng-clic non funziona con ng-if

Question

Perché il secondo pulsante non funziona, quando ng-if viene utilizzato?

Voglio realizzare un pulsante che è presente solo quando il valore del modello è impostato/non ""/non nullo.

Template:

<input type="text" ng-model="blub"/> 
<br/> 
<button ng-click="blub = 'xxxx'">X</button> 
<br/> 
<button ng-click="blub = 'yyyy'" ng-if="blub.length">Y</button> 

Controller:

angular.module('test', []) 
.controller('Main', function ($scope) { 
    // nothing to do here 
}); 

di giocare: JSFiddle

Answer 1

Uso ng-show Invece di ng-if. Questo dovrebbe funzionare

Fiddle

Answer 2

Non funziona perché ng-se è la creazione di un nuovo ambito e interpretando 'aaaa' tuoi blub = come la definizione di una nuova variabile locale nel nuovo ambito. È possibile verificare questo mettendo il secondo pulsante per:

<button ng-click="$parent.blub = 'yyyy'" ng-if="blub.length">Y</button> 

Tuttavia $ genitore è una caratteristica brutto.

Answer 3

Il pulsante non funziona a causa dell'ambito nidificato creato da ng-if. Il numero blub associato al secondo pulsante non è lo stesso blub associato al primo.

È possibile utilizzare ng-show anziché ng-if, poiché utilizza l'ambito del genitore, ma è solo evitando il problema anziché risolverlo. Leggi nested scopes in modo da poter capire cosa è realmente successo.

Inoltre, check this out: fiddle

Answer 4

Prova a mettere una magia dot sulla variabile

<input type="text" ng-model="bl.ub"/> 
<br/> 
<button ng-click="bl.ub = 'xxxx'">X</button> 
<br/> 
<button ng-click="bl.ub = 'yyyy'" ng-if="bl.ub.length">Y</button> 

jsfiddle