ng-click nie działa z ng-if

Question

Dlaczego drugi przycisk nie działa, gdy ng-if jest używany?

Chcę zrealizować przycisk, który jest obecny tylko wtedy, gdy wartość modelu jest ustawiona/nie ""/nie jest pusta.

Szablon:

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

Kontroler:

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

się bawić: JSFiddle

Answer 1

Zastosowanie ng-show Zamiast ng-if. To powinno działać.

Fiddle

Answer 2

To nie działa, ponieważ NG-jeśli jest stworzenie nowego zakresu i interpretacji „yyyy” Twoje Blub = jak definiowania nowej zmiennej lokalnej w nowym zakresie. Można to sprawdzić poprzez umieszczenie drugiego przycisku do:

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

Jednak $ rodzic jest brzydka cecha.

Answer 3

Przycisk nie działa z powodu zagnieżdżonego zakresu utworzonego przez ng-if. blub przywiązany do drugiego przycisku nie jest tym samym blub, który jest związany z pierwszym.

Możesz użyć ng-show zamiast ng-if, ponieważ używa on zasięgu swojego rodzica, ale to tylko unika problemu, zamiast go rozwiązywać. Przeczytaj o nested scopes, abyś mógł zrozumieć, co się właściwie wydarzyło.

Również to sprawdzić: fiddle

Answer 4

Spróbuj oddanie magiczną kropkę na zmiennej

<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