Co to jest dyrektywa celna?
Dyrektywa niestandardowa w Angular Js to dyrektywa zdefiniowana przez użytkownika z pożądaną funkcjonalnością. Chociaż AngularJS ma wiele potężnych dyrektyw po wyjęciu z pudełka, czasami wymagane są niestandardowe dyrektywy.
W tym samouczku nauczysz się:
- Jak stworzyć dyrektywę celną?
- Dyrektywy i zakresy AngularJs
- Używanie kontrolerów z dyrektywami
- Jak tworzyć dyrektywy wielokrotnego użytku
- Dyrektywy i komponenty AngularJS - ng-transclude
- Dyrektywy zagnieżdżone
- Obsługa zdarzeń w dyrektywie
Jak stworzyć dyrektywę celną?
Rzućmy okiem na przykład, jak możemy stworzyć własną dyrektywę.
Dyrektywa niestandardowa w naszym przypadku po prostu wstawi znacznik DIV, który ma tekst „AngularJS Tutorial” na naszej stronie, gdy ta dyrektywa zostanie wywołana.
Event Registration Guru99 Global Event
Objaśnienie kodu:
- Najpierw tworzymy moduł dla naszej aplikacji kątowej. Jest to wymagane do utworzenia niestandardowej dyrektywy, ponieważ dyrektywa zostanie utworzona przy użyciu tego modułu.
- Teraz tworzymy niestandardową dyrektywę o nazwie „ngGuru” i definiujemy funkcję, która będzie miała niestandardowy kod dla naszej dyrektywy.
Uwaga:-
Zwróć uwagę, że definiując dyrektywę, zdefiniowaliśmy ją jako ngGuru z literą „G” jako wielką. A kiedy uzyskujemy do niego dostęp z naszego znacznika div jako dyrektywy, uzyskujemy do niego dostęp jako ng-guru. W ten sposób firma Angular rozumie dyrektywy niestandardowe zdefiniowane w aplikacji. Po pierwsze, nazwa dyrektywy celnej powinna zaczynać się od liter „ng”. Po drugie, myślnik „-” powinien być używany tylko przy wywoływaniu dyrektywy. Po trzecie, pierwsza litera po literach „ng” podczas definiowania dyrektywy może być mała lub duża.
- Używamy parametru szablonu, który jest parametrem zdefiniowanym przez Angular dla dyrektyw niestandardowych. W tym przypadku definiujemy, że ilekroć ta dyrektywa jest używana, po prostu użyj wartości szablonu i wstrzyknij ją do kodu wywołującego.
- Tutaj używamy teraz naszej niestandardowej dyrektywy „ng-guru”. Kiedy to zrobimy, wartość, którą zdefiniowaliśmy dla naszego szablonu „Angular JS Tutorial” zostanie teraz wstrzyknięta tutaj.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
- Powyższe wyniki jasno pokazują, że nasza niestandardowa dyrektywa ng-guru, która ma zdefiniowany szablon do wyświetlania niestandardowego tekstu, zostanie wyświetlona w przeglądarce.
Dyrektywy i zakresy AngularJs
Zakres definiuje się jako klej, który wiąże kontroler z widokiem poprzez zarządzanie danymi między widokiem a kontrolerem.
Podczas tworzenia niestandardowych dyrektyw AngularJs domyślnie będą one miały dostęp do obiektu zasięgu w kontrolerze nadrzędnym.
W ten sposób niestandardowa dyrektywa może łatwo wykorzystać dane przekazywane do głównego kontrolera.
Spójrzmy na przykład, jak możemy użyć zakresu kontrolera nadrzędnego w naszej dyrektywie niestandardowej.
Event Registration Guru99 Global Event
Objaśnienie kodu:
- Najpierw tworzymy kontroler o nazwie „DemoController”. W tym przypadku definiujemy zmienną o nazwie tutorialName i dołączamy ją do obiektu zasięgu w jednej instrukcji - $ scope.tutorialName = "AngularJS".
- W naszej niestandardowej dyrektywie możemy wywołać zmienną „tutorialName” za pomocą wyrażenia. Ta zmienna byłaby dostępna, ponieważ jest zdefiniowana w kontrolerze „DemoController”, który stałby się elementem nadrzędnym tej dyrektywy.
- Odwołujemy się do kontrolera w znaczniku DIV, który będzie działał jako nasz nadrzędny znacznik DIV. Należy zauważyć, że należy to zrobić najpierw, aby nasza niestandardowa dyrektywa miała dostęp do zmiennej tutorialName.
- W końcu dołączamy naszą niestandardową dyrektywę „ng-guru” do naszego znacznika div.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
- Powyższy wynik jasno pokazuje, że nasza niestandardowa dyrektywa „ng-guru” używa zmiennej zakresu tutorialName w kontrolerze nadrzędnym.
Używanie kontrolerów z dyrektywami
Angular daje możliwość dostępu do zmiennej składowej kontrolera bezpośrednio z niestandardowych dyrektyw bez potrzeby stosowania obiektu zakresu.
Czasami jest to konieczne, ponieważ w aplikacji może istnieć wiele obiektów zakresu należących do wielu kontrolerów.
Istnieje więc duże prawdopodobieństwo, że popełnisz błąd, uzyskując dostęp do obiektu zakresu niewłaściwego kontrolera.
W takim scenariuszu istnieje sposób, aby konkretnie wspomnieć o stwierdzeniu „Chcę uzyskać dostęp do tego konkretnego kontrolera” z mojej dyrektywy.
Spójrzmy na przykład, jak możemy to osiągnąć.
Event Registration Guru99 Global Event
Objaśnienie kodu:
- Najpierw tworzymy kontroler o nazwie „DemoController”. W tym celu zdefiniujemy zmienną o nazwie „tutorialName” i tym razem zamiast dołączać ją do obiektu zasięgu, dołączymy ją bezpośrednio do kontrolera.
- W naszej dyrektywie niestandardowej szczególnie wspominamy, że chcemy użyć kontrolera „DemoController” za pomocą słowa kluczowego parametru kontrolera.
- Tworzymy odniesienie do kontrolera za pomocą parametru „controllerAs”. Jest to zdefiniowane przez Angular i jest sposobem na odwołanie się do kontrolera jako odniesienia.
Uwaga: - Możliwy jest dostęp do wielu kontrolerów w dyrektywie poprzez określenie odpowiednich bloków kontrolera, controllerAs i szablonów instrukcji.
- Wreszcie w naszym szablonie używamy odwołania utworzonego w kroku 3 i używamy zmiennej składowej, która została dołączona bezpośrednio do kontrolera w kroku 1.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Dane wyjściowe wyraźnie pokazują, że niestandardowa dyrektywa szczególnie uzyskuje dostęp do DemoController i dołączonej do niej zmiennej składowej tutorialName i wyświetla tekst „Angular”.
Jak tworzyć dyrektywy wielokrotnego użytku
Widzieliśmy już siłę dyrektyw niestandardowych, ale możemy przenieść to na wyższy poziom, tworząc nasze własne dyrektywy wielokrotnego użytku.
Załóżmy na przykład, że chcieliśmy wstrzyknąć kod, który zawsze pokazywałby poniższe tagi HTML na wielu ekranach, co jest po prostu danymi wejściowymi dla „imienia i nazwiska” i „wieku” użytkownika.
Aby ponownie użyć tej funkcji na wielu ekranach bez kodowania za każdym razem, tworzymy główną kontrolkę lub dyrektywę kątową, aby zachować te kontrolki („Imię” i „wiek” użytkownika).
Więc teraz, zamiast za każdym razem wprowadzać ten sam kod na poniższym ekranie, możemy w rzeczywistości osadzić ten kod w dyrektywie i osadzić tę dyrektywę w dowolnym momencie.
Zobaczmy przykład, jak możemy to osiągnąć.
Event Registration Guru99 Global Event
Objaśnienie kodu:
- W naszym fragmencie kodu dla dyrektywy niestandardowej zmienia się tylko wartość nadana parametrowi szablonu naszej dyrektywy niestandardowej.
Zamiast tagu lub tekstu planu pięć, tak naprawdę wprowadzamy cały fragment 2 kontrolek wejściowych dla "Imię" i "wiek", które muszą być pokazane na naszej stronie.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z powyższego wyniku widać, że fragment kodu z szablonu dyrektywy niestandardowej zostaje dodany do strony.
Dyrektywy i komponenty AngularJS - ng-transclude
Jak wspomnieliśmy wcześniej, Angular ma na celu rozszerzenie funkcjonalności HTML. Widzieliśmy już, jak możemy mieć wstrzyknięty kod przy użyciu niestandardowych dyrektyw wielokrotnego użytku.
Jednak we współczesnym tworzeniu aplikacji internetowych istnieje również koncepcja tworzenia komponentów internetowych. Zasadniczo oznacza to tworzenie własnych tagów HTML, których można używać jako komponentów w naszym kodzie.
Dlatego angular zapewnia kolejny poziom mocy rozszerzania tagów HTML, dając możliwość wstawiania atrybutów do samych tagów HTML.
Odbywa się to za pomocą tagu „ ng-transclude ”, który jest rodzajem ustawienia, które mówi angularowi, aby przechwycił wszystko, co jest umieszczone w dyrektywie w znacznikach.
Weźmy przykład, jak możemy to osiągnąć.
Event Registration Guru99 Global Event
Angular JS
Objaśnienie kodu:
- Używamy dyrektywy, aby zdefiniować niestandardowy tag HTML o nazwie „panel” i dodać funkcję, która umieści niestandardowy kod dla tego tagu. Na wyjściu nasz niestandardowy znacznik panelu wyświetli tekst „AngularJS” w prostokącie z jednolitą czarną obwódką.
- Atrybut „transclude” musi być wymieniony jako true, co jest wymagane przez angulara, aby wstawić ten tag do naszego DOM.
- W zakresie definiujemy atrybut tytułu. Atrybuty są zwykle definiowane jako pary nazwa / wartość, na przykład: nazwa = "wartość". W naszym przypadku nazwa atrybutu w tagu HTML naszego panelu to „title”. Symbol „@” jest wymaganiem od kątowych. Dzieje się tak, aby po wykonaniu wiersza title = {{title}} w kroku 5 niestandardowy kod atrybutu tytułu został dodany do tagu HTML panelu.
- Niestandardowy kod atrybutów tytułu, który po prostu rysuje pełną czarną ramkę dla naszej kontroli.
- Na koniec wywołujemy nasz niestandardowy tag HTML wraz ze zdefiniowanym atrybutem tytułu.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
- Dane wyjściowe wyraźnie pokazują, że atrybut title znacznika html5 pane został ustawiony na niestandardową wartość „Angular.JS”.
Dyrektywy zagnieżdżone
Dyrektywy kątowe mogą być zagnieżdżane. Podobnie jak tylko wewnętrzne moduły lub funkcje w dowolnym języku programowania, może być konieczne osadzenie dyrektyw w sobie nawzajem.
Możesz to lepiej zrozumieć, oglądając poniższy przykład.
W tym przykładzie tworzymy 2 dyrektywy zwane „zewnętrzną” i „wewnętrzną”.
- Dyrektywa inner wyświetla tekst o nazwie „Inner”.
- Podczas gdy zewnętrzna dyrektywa faktycznie wywołuje wewnętrzną dyrektywę, aby wyświetlić tekst o nazwie „Inner”.
Guru99 Global Event