2013-03-15 11 views
11

Napotkałem zachowanie w Angular, czego się nie spodziewałem, a celem tego posta jest sprawdzenie, czy jest to błąd, czy zamierzony i być może wyjaśnienie, dlaczego jest to zamierzone.ng-switch i ng-repeat na tym samym interleasingu elementu

Najpierw zobacz ten Plunkr: http://plnkr.co/edit/CB7k9r?p=preview. W przykładzie stworzyłem tablicę o nazwie array z trzema wpisami do obiektu. Następnie stworzyłem przełącznik ng na podstawie zawartości pola wejściowego (zwanego przełącznikiem). Gdy wartość przełącznika wynosi 1, powinna wydrukować wszystkie nazwy obiektów w tablicy poprzedzone przedrostkiem "1" i poprzedzone przedrostkiem "inne".

To nie działa jak rozumie się to pokazuje błąd:

Error: Argument '?' is required at assertArg 

Jednak sam przykład przepisany (http://plnkr.co/edit/68Mfux?p=preview) z dodatkowym div wokół liście, ng-switch przeniósł się do tego div i ng -switch-po przejściu z li do ul (oddzielając ng-repeat i ng-switch-when) działa zgodnie z przeznaczeniem.

Czy ktoś mógłby wyjaśnić, dlaczego tak jest?

+0

Struktura obu Plunkr wydaje się być dokładnie taka sama, z wyjątkiem nazw zmieniających się z tablicy na strumienie. Jesteś pewien, że się nie pomyliłeś? –

+0

Chociaż jest to całkowicie możliwe, popełniłem błąd, pierwszy Plunker jest błędny, podczas gdy drugi nie. Nie rozumiem, co jest nie tak z pierwszym. – Kevin

+0

Ah, dzięki za heads-up. Musiałem popełnić błąd rozwidlenia/uratowania. Naprawiono teraz http://plnkr.co/edit/CB7k9r?p=preview nie działa http://plnkr.co/edit/68Mfux?p=preview robi. (i rozumiem teraz, że Tiago miał na myśli to samo, przepraszam) – Kevin

Odpowiedz

17

Jest "intencjonalny", ponieważ jest wynikiem tego, jak kątowe obsługuje powtórzenie ng. Zasadniczo, wiele kopii znaczników jest klonowanych (znacznik wewnątrz ng-repeat jest używany jako szablon) i są one kompilowane indywidualnie dla każdego iterującego elementu. W związku z tym, kątowe jest zasadniczo kompilowanie 3 <li ng-switch-when='1' ....> i 3 <li ng-switch-default ....>, ale robiąc to poza kontekstem - nie ma elementu ng-włączania do porównania.

Można zobaczyć ten happening inspekcji wynikowy znaczników:

<ul ng-switch="" on="toggle"> 
    <!-- ngRepeat: entry in array --> 
    <!-- ngSwitchWhen: 1 --> 
    <!-- ngSwitchWhen: 1 --> 
    <!-- ngSwitchWhen: 1 --> 
    <!-- ngRepeat: entry in array --> 
    <!-- ngSwitchDefault: --> 
    <!-- ngSwitchDefault: --> 
    <!-- ngSwitchDefault: -->   
</ul> 

obu dyrektyw - ng-repeat i ng-switch - należy obchodzić się ostrożnie, ponieważ (w przeciwieństwie, na przykład, ng-show lub ng-hide) silnie wpływa na strukturę. Drugi (działający) Plunker jest do zrobienia - działa tylko z dyrektywami PO (strukturalnie, INSIDE) logice ng-switch.

Powiązane problemy