ng-click funktioniert nicht mit ng-if

Question

Warum funktioniert die zweite Schaltfläche nicht, wenn ng-if verwendet wird?

Ich möchte eine Schaltfläche realisieren, die nur vorhanden ist, wenn der Modellwert auf ""/nicht auf Null gesetzt ist.

Vorlage:

<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 
}); 

rumspielen: JSFiddle

Answer 1

Verwenden ng-show Statt ng-if. Das sollte funktionieren.

Fiddle

Answer 2

Es funktioniert nicht, weil ng-wenn ein neuen Rahmen zu schaffen und Ihre blub = ‚yyyy‘ zu interpretieren als eine neue lokale Variable in dem neuen Bereich zu definieren. Sie können dies testen, indem Sie auf die zweite Schaltfläche setzen zu:

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

jedoch $ parent eine hässliche Funktion.

Answer 3

Die Schaltfläche funktioniert nicht, da der verschachtelte Bereich von ng-if erstellt wurde. Die an die zweite Schaltfläche gebundene blub ist nicht dieselbe blub, die an die erste gebunden ist.

Sie können ng-show anstelle von ng-if verwenden, da es den Bereich seiner Eltern verwendet, aber das ist nur das Problem zu vermeiden, anstatt es zu lösen. Lesen Sie über nested scopes, damit Sie verstehen können, was tatsächlich passiert ist.

Auch check this out: fiddle

Answer 4

Versuchen Sie, eine Magie Punkt auf der Variable

<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