Ce este directiva vamală?
O directivă personalizată în Angular Js este o directivă definită de utilizator cu funcționalitatea dorită. Chiar dacă AngularJS are o mulțime de directive puternice scoase din funcțiune, uneori sunt necesare directive personalizate.
În acest tutorial, veți învăța-
- Cum se creează o directivă personalizată?
- Directivele și domeniile AngularJs
- Utilizarea controlerelor cu directive
- Cum se creează directive reutilizabile
- Directivele și componentele AngularJS - ng-transclude
- Directivele imbricate
- Gestionarea evenimentelor într-o directivă
Cum se creează o directivă personalizată?
Să aruncăm o privire la un exemplu despre cum putem crea o directivă personalizată.
Directiva personalizată, în cazul nostru, va injecta pur și simplu o etichetă div care are textul „AngularJS Tutorial” în pagina noastră atunci când directiva este apelată.
Event Registration Guru99 Global Event
Explicatie cod:
- Mai întâi creăm un modul pentru aplicația noastră unghiulară. Acest lucru este necesar pentru a crea o directivă personalizată, deoarece directiva va fi creată utilizând acest modul.
- Acum creăm o directivă personalizată numită „ngGuru” și definim o funcție care va avea cod personalizat pentru directiva noastră.
Notă:-
Rețineți că, la definirea directivei, am definit-o ca ngGuru cu litera „G” ca capitală. Și când îl accesăm din tag-ul div ca directivă, îl accesăm ca ng-guru. Acesta este modul în care unghiular înțelege directivele personalizate definite într-o aplicație. În primul rând, numele directivei personalizate ar trebui să înceapă cu literele „ng”. În al doilea rând, simbolul cratimă „-” trebuie menționat numai atunci când se apelează directiva. Și, în al treilea rând, prima literă care urmează literelor „ng” la definirea directivei poate fi mai mică sau mai mare.
- Folosim parametrul șablon care este un parametru definit de Angular pentru directive personalizate. În acest sens, definim că, ori de câte ori se utilizează această directivă, trebuie doar să utilizați valoarea șablonului și să o injectați în codul de apelare.
- Aici folosim acum directiva „ng-guru” personalizată. Când facem acest lucru, valoarea pe care am definit-o pentru șablonul nostru „Tutorial JS angular” va fi acum injectată aici.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
- Rezultatul de mai sus arată clar că directiva noastră personalizată ng-guru, care are șablonul definit pentru afișarea unui text personalizat, este afișată în browser.
Directivele și domeniile AngularJs
Domeniul de aplicare este definit ca adezivul care leagă controlerul de vizualizare prin gestionarea datelor între vizualizare și controler.
La crearea directivelor personalizate AngularJs, acestea vor avea în mod implicit acces la obiectul scop din controlerul părinte.
În acest fel, devine ușor pentru directiva personalizată să utilizeze datele transmise controlorului principal.
Să vedem un exemplu despre modul în care putem folosi domeniul de aplicare al unui controler părinte în directiva noastră personalizată.
Event Registration Guru99 Global Event
Explicatie cod:
- Mai întâi creăm un controller numit „DemoController”. În aceasta, definim o variabilă numită tutorialName și o atașăm la obiectul scop într-o declarație - $ scope.tutorialName = "AngularJS".
- În directiva noastră personalizată, putem apela variabila „tutorialName” utilizând o expresie. Această variabilă ar fi accesibilă deoarece este definită în controlerul „DemoController”, care ar deveni părintele pentru această directivă.
- Referim controlerul într-o etichetă div, care va acționa ca eticheta div divină. Rețineți că acest lucru trebuie făcut mai întâi pentru ca directiva noastră personalizată să acceseze variabila tutorialName.
- În cele din urmă, atașăm directiva noastră personalizată „ng-guru” la eticheta div.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
- Rezultatul de mai sus arată clar că directiva noastră personalizată „ng-guru” folosește variabila de scop tutorialName în controlerul părinte.
Utilizarea controlerelor cu directive
Angular oferă facilitatea de a accesa variabila membru a controlerului direct din directive personalizate fără a fi nevoie de obiectul scop.
Acest lucru devine uneori necesar, deoarece într-o aplicație este posibil să aveți obiecte cu mai multe scopuri aparținând mai multor controlere.
Deci, există șanse mari să faceți greșeala de a accesa obiectul scop al controlerului greșit.
În astfel de scenarii există o modalitate de a menționa în mod specific spunând „Vreau să accesez acest controler specific” din directiva mea.
Să aruncăm o privire la un exemplu despre cum putem realiza acest lucru.
Event Registration Guru99 Global Event
Explicatie cod:
- Mai întâi creăm un controller numit „DemoController”. În aceasta vom defini o variabilă numită "tutorialName" și de această dată, în loc să o atașăm la obiectul scop, o vom atașa direct la controler.
- În directiva noastră personalizată, menționăm în mod specific că dorim să utilizăm controlerul „DemoController” utilizând cuvântul cheie parametru controller.
- Creăm o referință la controler folosind parametrul „controllerAs”. Aceasta este definită de Angular și este modalitatea de referință a controlerului ca referință.
Notă: - Este posibil să accesați mai multe controlere într-o directivă prin specificarea blocurilor respective ale controlerului, controllerAs și instrucțiunilor șablon.
- În cele din urmă, în șablonul nostru, folosim referința creată la pasul 3 și folosim variabila membru care a fost atașată direct la controler la pasul 1.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Rezultatul arată clar că directiva personalizată accesează în special DemoController și variabila membru tutorialName atașată la acesta și afișează textul „Angular”.
Cum se creează directive reutilizabile
Am văzut deja puterea directivelor personalizate, dar o putem duce la nivelul următor construindu-ne propriile directive reutilizabile.
Să presupunem, de exemplu, că am vrut să injectăm cod care să afișeze întotdeauna etichetele HTML de mai jos pe mai multe ecrane, care este în esență doar o intrare pentru „Nume” și „vârstă” ale utilizatorului.
Pentru a reutiliza această funcție pe mai multe ecrane fără codificare de fiecare dată, creăm un control principal sau o directivă în unghiular pentru a ține aceste controale („Nume” și „vârstă” a utilizatorului).
Deci, acum, în loc să introducem de fiecare dată același cod pentru ecranul de mai jos, putem încorpora acest cod într-o directivă și să încorporăm directiva respectivă în orice moment.
Să vedem un exemplu despre cum putem realiza acest lucru.
Event Registration Guru99 Global Event
Explicatie cod:
- În fragmentul de cod pentru o directivă personalizată, ceea ce se modifică este doar valoarea dată parametrului șablon al directivei noastre personalizate.
În loc de o etichetă sau un text cu cinci planuri, introducem de fapt întregul fragment de 2 controale de intrare pentru „Nume” și „vârstă” care trebuie afișate pe pagina noastră.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din rezultatul de mai sus, putem vedea că fragmentul de cod din șablonul directivei personalizate se adaugă la pagină.
Directivele și componentele AngularJS - ng-transclude
După cum am menționat destul de devreme, Angular este menit să extindă funcționalitatea HTML. Și am văzut deja cum putem avea injecție de cod folosind directive personalizate reutilizabile.
Dar în dezvoltarea modernă a aplicațiilor web, există și un concept de dezvoltare a componentelor web. Ceea ce înseamnă practic crearea propriilor noastre etichete HTML care pot fi utilizate ca componente în codul nostru.
Prin urmare, unghiular oferă un alt nivel de putere extinderii etichetelor HTML, oferind posibilitatea de a injecta atribute în etichetele HTML în sine.
Acest lucru se face prin eticheta „ ng-transclude ”, care este un fel de setare pentru a spune angular să capteze tot ceea ce este introdus în directivă în markup.
Să luăm un exemplu despre cum putem realiza acest lucru.
Event Registration Guru99 Global Event
Angular JS
Explicatie cod:
- Folosim directiva pentru a defini o etichetă HTML personalizată numită „panou” și adăugăm o funcție care va pune un anumit cod personalizat pentru această etichetă. În ieșire, eticheta noastră de panou personalizat va afișa textul „AngularJS” într-un dreptunghi cu un chenar negru solid.
- Atributul „transclude” trebuie menționat ca fiind adevărat, lucru cerut de angular pentru a injecta această etichetă în DOM-ul nostru.
- În domeniul de aplicare, definim un atribut de titlu. Atributele sunt definite în mod normal ca perechi nume / valoare, cum ar fi: nume = "valoare". În cazul nostru, numele atributului din eticheta HTML din panoul nostru este „title”. Simbolul „@” este cerința de la unghiular. Acest lucru se face astfel încât atunci când linia title = {{title}} este executată la pasul 5, codul personalizat pentru atributul title se adaugă la eticheta HTML a panoului.
- Codul personalizat pentru atributele titlului care doar trasează o margine neagră solidă pentru controlul nostru.
- În cele din urmă, apelăm eticheta HTML personalizată împreună cu atributul title care a fost definit.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
- Rezultatul arată clar că atributul de titlu al etichetei html5 a panoului a fost setat la valoarea personalizată „Angular.JS”.
Directivele imbricate
Directivele în unghiular pot fi cuibărite. La fel ca doar modulele interioare sau funcțiile din orice limbaj de programare, poate fi necesar să încorporați directivele unul în celălalt.
Puteți obține o mai bună înțelegere a acestui fapt, consultând exemplul de mai jos.
În acest exemplu, creăm 2 directive numite „exterioare” și „interioare”.
- Directiva interioară afișează un text numit „Interior”.
- În timp ce directiva externă face de fapt un apel către directiva interioară pentru a afișa textul numit „Interior”.
Guru99 Global Event