Kas ir muitas direktīva?
Pielāgota direktīva Angular Js ir lietotāja definēta direktīva ar jūsu vēlamo funkcionalitāti. Lai arī AngularJS ir daudz spēcīgu direktīvu, kas dažreiz ir nepieciešamas, dažkārt ir nepieciešamas arī pielāgotas direktīvas.
Šajā apmācībā jūs uzzināsiet
- Kā izveidot pielāgotu direktīvu?
- AngularJs direktīvas un darbības jomas
- Kontrolieru izmantošana ar direktīvām
- Kā izveidot atkārtoti izmantojamas direktīvas
- AngularJS direktīvas un komponenti - ng-transclude
- Ligzdotas direktīvas
- Notikumu apstrāde direktīvā
Kā izveidot pielāgotu direktīvu?
Apskatīsim piemēru, kā mēs varam izveidot pielāgotu direktīvu.
Pielāgotā direktīva mūsu gadījumā vienkārši injicēs div tagu, kura mūsu lapā ir teksts "AngularJS Tutorial", kad tiek izsaukta direktīva.
Event Registration Guru99 Global Event
Koda skaidrojums:
- Vispirms mēs izveidojam moduli mūsu leņķiskajai lietošanai. Tas ir nepieciešams, lai izveidotu pielāgotu direktīvu, jo direktīva tiks izveidota, izmantojot šo moduli.
- Tagad mēs izveidojam pielāgotu direktīvu ar nosaukumu "ngGuru" un definējam funkciju, kurai mūsu direktīvai būs pielāgots kods.
Piezīme:-
Ņemiet vērā, ka, definējot direktīvu, mēs to esam definējuši kā ngGuru ar burtu “G” kā kapitālu. Un, kad mēs tam piekļūstam no sava div taga kā direktīvas, mēs tam piekļūstam kā ng-guru. Šādi leņķiski saprot lietojumprogrammā definētās pielāgotās direktīvas. Pirmkārt, muitas direktīvas nosaukumam jāsākas ar burtiem “ng”. Otrkārt, defise simbols “-” ir jāmin tikai, izsaucot direktīvu. Treškārt, pirmais burts, kas seko burtiem “ng”, definējot direktīvu, var būt vai nu mazs, vai lielais.
- Mēs izmantojam veidnes parametru, kuru parametrs, ko nosaka leņķiskais pielāgotajām direktīvām. Tajā mēs definējam, ka vienmēr, kad tiek izmantota šī direktīva, vienkārši izmantojiet veidnes vērtību un ievadiet to izsaukuma kodā.
- Šeit mēs tagad izmantojam mūsu pasūtījuma izveidoto "ng-guru" direktīvu. Kad mēs to izdarīsim, šeit tiks ievadīta vērtība, kuru mēs definējām veidnei "Leņķa JS apmācība".
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
- Iepriekš minētā izeja skaidri parāda, ka pārlūkprogrammā tiek parādīta mūsu pielāgotā ng-guru direktīva, kurai veidne ir definēta, lai parādītu pielāgotu tekstu.
AngularJs direktīvas un darbības jomas
Darbības joma ir definēta kā līme, kas kontrolieri saista ar skatu, pārvaldot datus starp skatu un kontrolieri.
Veidojot pielāgotas AngularJs direktīvas, tām pēc noklusējuma būs piekļuve vecāku kontroliera darbības jomas objektam.
Tādā veidā muitas direktīvai kļūst viegli izmantot galvenajam kontrolierim nodotos datus.
Apskatīsim piemēru, kā mēs varam izmantot vecāku kontroliera darbības jomu mūsu pielāgotajā direktīvā.
Event Registration Guru99 Global Event
Koda skaidrojums:
- Vispirms mēs izveidojam kontrolieri ar nosaukumu "DemoController". Tajā mēs definējam mainīgo ar nosaukumu tutorialName un pievienojam to darbības objektam vienā paziņojumā - $ scope.tutorialName = "AngularJS".
- Mūsu pielāgotajā direktīvā mēs varam izsaukt mainīgo "tutorialName", izmantojot izteiksmi. Šis mainīgais būtu pieejams, jo tas ir definēts kontrolierī "DemoController", kas kļūtu par šīs direktīvas vecāku.
- Mēs norādām kontrolieri div tagā, kas darbosies kā mūsu vecākā div tags. Ņemiet vērā, ka tas vispirms ir jādara, lai mūsu pielāgotā direktīva piekļūtu mainīgajam tutorialName.
- Visbeidzot, mēs vienkārši pievienojam mūsu pielāgoto direktīvu "ng-guru" savam tagam.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
- Iepriekš minētā izeja skaidri parāda, ka mūsu pielāgotā direktīva "ng-guru" vecāku kontrolierī izmanto sfēras mainīgo tutorialName.
Kontrolieru izmantošana ar direktīvām
Leņķiskais dod iespēju piekļūt kontroliera locekļa mainīgajam tieši no pielāgotajām direktīvām bez darbības jomas objekta vajadzības.
Reizēm tas kļūst nepieciešams, jo lietojumprogrammā var būt vairāki darbības objekti, kas pieder vairākiem kontrolleriem.
Tāpēc pastāv liela iespēja, ka jūs varētu kļūdīties, piekļūstot nepareiza kontroliera darbības jomas objektam.
Šādos scenārijos ir veids, kā no savas direktīvas īpaši pieminēt teikumu "Es gribu piekļūt šim īpašajam kontrolierim".
Apskatīsim piemēru, kā mēs to varam sasniegt.
Event Registration Guru99 Global Event
Koda skaidrojums:
- Vispirms mēs izveidojam kontrolieri ar nosaukumu "DemoController". Tajā mēs definēsim mainīgo, ko sauc par "tutorialName", un šoreiz tā vietā, lai to pievienotu sfēra objektam, mēs to pievienosim tieši kontrolierim.
- Mūsu pielāgotajā direktīvā mēs īpaši pieminam, ka mēs vēlamies izmantot kontrolieri "DemoController", izmantojot kontroliera parametra atslēgvārdu.
- Mēs izveidojam atsauci uz kontrolieri, izmantojot parametru "controllerAs". To definē leņķiskais, un tas ir veids, kā kontrolierim atsaukties.
Piezīme: - Direktīvā ir iespējams piekļūt vairākiem kontrolleriem, norādot attiecīgos kontrollera blokus, controllerAs un veidņu paziņojumus.
- Visbeidzot, mūsu veidnē mēs izmantojam atsauci, kas izveidota 3. solī, un izmantojam locekļa mainīgo, kas 1. solī tika pievienots tieši kontrolierim.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
Izeja skaidri parāda, ka pielāgotā direktīva īpaši piekļūst DemoController un tam pievienotajam locekļa mainīgajam tutorialName, un tiek parādīts teksts "Angular".
Kā izveidot atkārtoti izmantojamas direktīvas
Mēs jau redzējām muitas direktīvu spēku, taču mēs varam to pārcelt uz nākamo līmeni, izveidojot paši savas atkārtoti izmantojamās direktīvas.
Pieņemsim, ka, piemēram, mēs vēlējāmies ievadīt kodu, kas vienmēr parādītu zemāk redzamos HTML tagus vairākos ekrānos, kas būtībā ir tikai ievads lietotāja vārdam un vecumam.
Lai atkārtoti izmantotu šo funkciju vairākos ekrānos, katru reizi nekodējot, mēs izveidojam galveno vadību vai direktīvu leņķiski, lai turētu šīs vadīklas (lietotāja vārds un vecums).
Tāpēc tagad tā vietā, lai katru reizi zemāk redzamajā ekrānā ievadītu vienu un to pašu kodu, mēs faktiski varam šo kodu iegult direktīvā un iestrādāt šo direktīvu jebkurā brīdī.
Apskatīsim piemēru, kā mēs to varam sasniegt.
Event Registration Guru99 Global Event
Koda skaidrojums:
- Mūsu pielāgotās direktīvas koda fragmentā mainās tikai vērtība, kas tiek piešķirta mūsu pielāgotās direktīvas veidnes parametram.
Plāna piecu tagu vai teksta vietā mēs faktiski ievadām visu 2 ievades vadības elementu fragmentu nosaukumiem un vecumam, kas jāparāda mūsu lapā.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No iepriekš minētās izejas mēs varam redzēt, ka koda fragments no pielāgotās direktīvas veidnes tiek pievienots lapai.
AngularJS direktīvas un komponenti - ng-transclude
Kā mēs jau iepriekš minējām, Angular ir domāts HTML funkcionalitātes paplašināšanai. Un mēs jau esam redzējuši, kā mēs varam veikt koda ievadīšanu, izmantojot pielāgotas atkārtoti izmantojamas direktīvas.
Bet mūsdienu tīmekļa lietojumprogrammu izstrādē pastāv arī tīmekļa komponentu izstrādes koncepcija. Tas būtībā nozīmē izveidot savus HTML tagus, kurus var izmantot kā komponentus mūsu kodā.
Tādējādi leņķiskais nodrošina vēl vienu jaudas līmeni HTML tagu paplašināšanai, dodot iespēju injicēt atribūtus pašā HTML tagos.
To dara tags " ng-transclude ", kas ir sava veida iestatījums, lai teiktu, ka leņķiski jāaptver viss, kas marķējumā ir ievietots direktīvā.
Ņemsim piemēru, kā mēs to varam sasniegt.
Event Registration Guru99 Global Event
Angular JS
Koda skaidrojums:
- Mēs izmantojam direktīvu, lai definētu pielāgotu HTML tagu ar nosaukumu “pane” un pievienotu funkciju, kas šim tagam ievietos pielāgotu kodu. Izejā mūsu pielāgotās rūts tags parādīs tekstu "AngularJS" taisnstūrī ar cietu melnu apmali.
- Atribūts "transclude" ir jānorāda kā patiess, kas ir vajadzīgs leņķiskajam, lai injicētu šo tagu mūsu DOM.
- Darbības jomā mēs definējam nosaukuma atribūtu. Atribūtus parasti definē kā vārdu / vērtību pārus, piemēram: name = "value". Mūsu gadījumā atribūta nosaukums mūsu rūts HTML tagā ir "nosaukums". "@" Simbols ir prasība no leņķa. Tas tiek darīts tā, ka, izpildot 5. darbībā rindas nosaukumu = {{title}}, HTML atribūtam tiek pievienots pielāgotā kods atribūtam title.
- Pielāgots kods atribūtu atribūtiem, kas mūsu kontrolei vienkārši iezīmē stabilu melnu apmali.
- Visbeidzot, mēs izsaucam mūsu pielāgoto HTML tagu kopā ar definēto nosaukuma atribūtu.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
- Izeja skaidri parāda, ka rūts html5 taga atribūtam ir iestatīta pielāgotā vērtība “Angular.JS”.
Ligzdotas direktīvas
Leņķiskās direktīvas var būt ligzdotas. Tāpat kā tikai iekšējie moduļi vai funkcijas jebkurā programmēšanas valodā, iespējams, jums būs jāievieto direktīvas savā starpā.
Jūs to varat labāk izprast, redzot zemāk redzamo piemēru.
Šajā piemērā mēs izveidojam 2 direktīvas, kuras sauc par "ārējo" un "iekšējo".
- Iekšējā direktīvā tiek parādīts teksts ar nosaukumu "Iekšējais".
- Lai gan ārējā direktīva faktiski aicina iekšējo direktīvu, lai parādītu tekstu ar nosaukumu "Iekšējais".
Guru99 Global Event