Što je prilagođena direktiva?
Prilagođena direktiva u Angular Js je korisnički definirana direktiva sa vašom željenom funkcionalnošću. Iako AngularJS ima puno moćnih direktiva izravno, ponekad su potrebne prilagođene direktive.
U ovom vodiču naučit ćete-
- Kako stvoriti prilagođenu direktivu?
- Smjernice i opsezi AngularJs
- Korištenje kontrolera s direktivama
- Kako stvoriti direktive za ponovnu upotrebu
- Smjernice i komponente AngularJS - ng-transclude
- Ugniježđene direktive
- Rukovanje događajima u direktivi
Kako stvoriti prilagođenu direktivu?
Pogledajmo primjer kako možemo stvoriti prilagođenu direktivu.
Prilagođena direktiva u našem slučaju jednostavno će ubrizgati div oznaku koja na našoj stranici ima tekst "AngularJS Tutorial" kada se direktiva pozove.
Event Registration Guru99 Global Event
Objašnjenje koda:
- Prvo stvaramo modul za našu kutnu aplikaciju. To je potrebno za stvaranje prilagođene direktive jer će se direktiva kreirati pomoću ovog modula.
- Sada stvaramo prilagođenu direktivu nazvanu "ngGuru" i definiramo funkciju koja će imati prilagođeni kôd za našu direktivu.
Bilješka:-
Imajte na umu da smo ga prilikom definiranja direktive definirali kao ngGuru sa slovom 'G' kao glavnim gradom. A kada mu pristupamo iz naše div oznake kao direktive, pristupamo mu kao ng-guru. Tako angular razumije prilagođene direktive definirane u aplikaciji. Prvo ime prilagođene direktive treba započeti slovima 'ng'. Kao drugo, crticu '-' treba spominjati samo prilikom pozivanja direktive. I treće, prvo slovo iza slova 'ng' pri definiranju direktive može biti ili malo ili veliko.
- Koristimo parametar predloška koji je parametar definiran od strane Angular za prilagođene direktive. U ovome definiramo da kad god se koristi ova direktiva, onda samo upotrijebite vrijednost predloška i ubrizgajte ga u pozivni kod.
- Ovdje se sada služimo našom posebno stvorenom "ng-guru" direktivom. Kada to učinimo, ovdje će se ubrizgati vrijednost koju smo definirali za naš predložak "Angular JS Tutorial".
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
- Gornji izlaz jasno pokazuje da se naša prilagođena ng-guru direktiva, koja ima predložak definiran za prikazivanje prilagođenog teksta, prikazuje u pregledniku.
Smjernice i opsezi AngularJs
Opseg je definiran kao ljepilo koje veže kontroler za pogled upravljajući podacima između pogleda i kontrolera.
Prilikom izrade prilagođenih AngularJs direktiva, one će prema zadanim postavkama imati pristup objektu opsega u roditeljskom kontroleru.
Na taj način prilagođenoj direktivi postaje lako koristiti podatke koji se prosljeđuju glavnom kontroleru.
Pogledajmo primjer kako možemo koristiti opseg nadređenog kontrolera u našoj prilagođenoj direktivi.
Event Registration Guru99 Global Event
Objašnjenje koda:
- Prvo kreiramo kontroler nazvan "DemoController". U ovome definiramo varijablu koja se naziva tutorialName i pričvršćujemo je na objekt opsega u jednoj izjavi - $ scope.tutorialName = "AngularJS".
- U našoj prilagođenoj direktivi varijablu možemo nazvati "tutorialName" pomoću izraza. Ova bi varijabla bila dostupna jer je definirana u upravljaču "DemoController", koji bi postao nadređeni za ovu direktivu.
- Na kontroler upućujemo u div oznaku koja će djelovati kao naša nadređena div oznaka. Imajte na umu da to treba učiniti prvo kako bi naša prilagođena direktiva pristupila varijabli tutorialName.
- Napokon samo priložimo svoju prilagođenu direktivu "ng-guru" našoj div oznaci.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
- Gornji izlaz jasno pokazuje da naša prilagođena direktiva "ng-guru" koristi varijablu opsega tutorialName u roditeljskom kontroleru.
Korištenje kontrolera s direktivama
Angular omogućuje mogućnost pristupa varijabli člana kontrolera izravno iz prilagođenih direktiva bez potrebe za opsegom.
To ponekad postaje neophodno jer u aplikaciji možete imati više objekata opsega koji pripadaju više kontrolera.
Dakle, postoji velika vjerojatnost da biste mogli pogriješiti pristupivši objektu opsega pogrešnog kontrolera.
U takvim scenarijima postoji način da se iz moje direktive izričito spomene izreka "Želim pristupiti ovom određenom kontroleru".
Pogledajmo primjer kako to možemo postići.
Event Registration Guru99 Global Event
Objašnjenje koda:
- Prvo kreiramo kontroler nazvan "DemoController". U ovome ćemo definirati varijablu nazvanu "tutorialName" i ovaj put ćemo je umjesto da je priključimo na objekt opsega, priključiti izravno na kontroler.
- U našoj prilagođenoj direktivi posebno spominjemo da želimo upotrijebiti regulator "DemoController" korištenjem ključne riječi parametra kontrolera.
- Stvaramo referencu na kontroler pomoću parametra "controllerAs". To je definirao Angular i to je način na koji se regulator poziva kao referenca.
Napomena: - Moguće je pristupiti više kontrolora u direktivi navođenjem odgovarajućih blokova kontrolera, kontrolora i izraza predloška.
- Konačno, u našem predlošku koristimo referencu stvorenu u koraku 3 i koristeći varijablu člana koja je izravno dodana na kontroler u koraku 1.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Izlaz jasno pokazuje da prilagođena direktiva posebno pristupa DemoControlleru i pridruženoj varijabli člana tutorialName i prikazuje tekst "Angular".
Kako stvoriti direktive za ponovnu upotrebu
Već smo vidjeli snagu prilagođenih direktiva, ali to možemo podići na sljedeću razinu izgradnjom vlastitih ponovnih upotrebljivih direktiva.
Recimo, na primjer, da smo željeli ubrizgati kôd koji će uvijek prikazivati donje HTML oznake na više zaslona, što je u osnovi samo ulaz za "Ime" i "dob" korisnika.
Za ponovnu upotrebu ove funkcije na više zaslona bez kodiranja svaki put stvaramo glavnu kontrolu ili direktivu u kutu da bi se te kontrole zadržale ("Ime" i "dob" korisnika).
Dakle, umjesto da svaki put unosimo isti kod za donji zaslon, taj kôd zapravo možemo ugraditi u direktivu i ugraditi tu direktivu u bilo kojem trenutku.
Pogledajmo primjer kako to možemo postići.
Event Registration Guru99 Global Event
Objašnjenje koda:
- U našem isječku koda za prilagođenu direktivu mijenja se samo vrijednost koja se daje parametru predloška naše prilagođene direktive.
Umjesto oznake ili teksta plana pet, zapravo unosimo cijeli fragment od 2 ulazne kontrole za "Ime" i "dob" koje treba prikazati na našoj stranici.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz gornjeg rezultata možemo vidjeti da se isječak koda iz predloška prilagođene direktive dodaje na stranicu.
Smjernice i komponente AngularJS - ng-transclude
Kao što smo već spomenuli, Angular je namijenjen proširenju funkcionalnosti HTML-a. I već smo vidjeli kako možemo izvršiti ubrizgavanje koda pomoću prilagođenih direktiva koje se mogu ponovno upotrijebiti.
No, u modernom razvoju web aplikacija postoji i koncept razvoja web komponenata. Što u osnovi znači stvaranje vlastitih HTML oznaka koje se mogu koristiti kao komponente u našem kodu.
Stoga angular pruža još jednu razinu moći proširivanja HTML oznaka davanjem mogućnosti ubrizgavanja atributa u same HTML oznake.
To se radi pomoću oznake " ng-transclude ", koja je svojevrsna postavka koja angularu govori da uhvati sve što je stavljeno unutar direktive u oznaku.
Uzmimo primjer kako to možemo postići.
Event Registration Guru99 Global Event
Angular JS
Objašnjenje koda:
- Koristimo direktivu za definiranje prilagođene HTML oznake koja se naziva 'okno' i dodavanje funkcije koja će staviti neki prilagođeni kôd za ovu oznaku. U izlazu će naša prilagođena oznaka okna prikazati tekst "AngularJS" u pravokutniku s masivnim crnim obrubom.
- Atribut "transclude" mora se spomenuti kao istinit, što je Angular potrebno za ubrizgavanje ove oznake u naš DOM.
- U opsegu definiramo atribut naslova. Atributi se obično definiraju kao parovi ime / vrijednost poput: name = "value". U našem slučaju, naziv atributa u našoj HTML oznaci okna je "title". Simbol "@" zahtjev je iz kuta. To je učinjeno tako da se prilikom izvršavanja naslova retka = {{title}} u koraku 5, prilagođeni kôd za atribut naslova doda u HTML oznaku okna.
- Prilagođeni kôd za atribute naslova koji samo crta puni crni obrub za našu kontrolu.
- Konačno, pozivamo našu prilagođenu HTML oznaku zajedno s definiranim atributom naslova.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
- Izlaz jasno pokazuje da je atribut naslova oznake html5 okna postavljen na prilagođenu vrijednost "Angular.JS".
Ugniježđene direktive
Direktive u kutnom mogu se ugnijezditi. Kao i samo unutarnji moduli ili funkcije u bilo kojem programskom jeziku, možda ćete trebati ugrađivati smjernice jedna u drugu.
To možete bolje razumjeti ako vidite donji primjer.
U ovom primjeru stvaramo dvije direktive koje se nazivaju "vanjska" i "unutarnja".
- Unutarnja direktiva prikazuje tekst nazvan "Unutarnji".
- Dok vanjska direktiva zapravo poziva unutarnju direktivu da prikaže tekst nazvan "Unutarnji".
Guru99 Global Event