Jaki jest najłatwiejszy sposób przekazania zmiennej zasięgu AngularJS z dyrektywy do kontrolera? Wszystkie przykłady, które widziałem, wydają się tak złożone, czy nie ma sposobu, aby uzyskać dostęp do kontrolera z dyrektywy i ustawić jedną z jej zmiennych zakresu?
angularjs
angularjs-directive
ng-controller
Zabawka na wietrze
źródło
źródło
Odpowiedzi:
Edytowane w dniu 2014/8/25: Tutaj to rozwidliłem.
Dzięki @anvarik.
Oto JSFiddle . Zapomniałem, gdzie to rozwidliłem. Ale to jest dobry przykład pokazujący różnicę między = i @
źródło
Poczekaj, aż angular oceni zmienną
Dużo majstrowałem przy tym i nie mogłem zmusić go do pracy nawet ze zmienną zdefiniowaną
"="
w zakresie. Oto trzy rozwiązania w zależności od sytuacji.Rozwiązanie nr 1
Okazało się, że zmienna nie została jeszcze oceniona przez kątową kiedy została przekazana do dyrektywy. Oznacza to, że możesz uzyskać do niego dostęp i używać go w szablonie, ale nie wewnątrz funkcji linku lub kontrolera aplikacji, chyba że czekamy na ocenę.
Jeśli zmienna się zmienia lub jest pobierana przez żądanie, użyj
$observe
lub$watch
:A oto html (pamiętaj o nawiasach!):
Zauważ, że nie powinieneś ustawiać zmiennej na
"="
w zakresie, jeśli używasz$observe
funkcji. Odkryłem również, że przekazuje obiekty jako łańcuchy, więc jeśli przekazujesz obiekty, użyj rozwiązania nr 2 lubscope.$watch(attrs.yourDirective, fn)
(lub nr 3, jeśli zmienna się nie zmienia).Rozwiązanie nr 2
Jeśli twoja zmienna została utworzona np. W innym kontrolerze , ale wystarczy poczekać, aż angular ją przeanalizuje przed wysłaniem jej do kontrolera aplikacji, możemy użyć opcji
$timeout
czekania aż się$apply
uruchomi. Musimy również użyć,$emit
aby wysłać go do kontrolera aplikacji zakresu nadrzędnego (ze względu na izolowany zakres w dyrektywie):A oto html (bez nawiasów!):
Rozwiązanie nr 3
Jeśli twoja zmienna się nie zmienia i musisz ją ocenić w swojej dyrektywie, możesz użyć
$eval
funkcji:A oto html (pamiętaj o nawiasach!):
Spójrz również na tę odpowiedź: https://stackoverflow.com/a/12372494/1008519
Odniesienie do wydania FOUC (flash z niestylizowaną zawartością): http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED
Dla zainteresowanych: oto artykuł na temat kątowego cyklu życia
źródło
ng-if="someObject.someVariable"
dyrektywa (lub element z dyrektywą jako atrybutem) - dyrektywa zaczyna działać dopiero posomeObject.someVariable
zdefiniowaniu.