Kuidas luua näite abil AngularJS-is kohandatud direktiivi

Mis on kohandatud direktiiv?

Nurga Js kohandatud direktiiv on teie soovitud funktsionaalsusega kasutaja määratletud direktiiv. Kuigi AngularJS-il on kastist väljas palju võimsaid direktiive, on mõnikord vaja ka kohandatud direktiive.

Selles õpetuses saate teada

• Kuidas luua kohandatud direktiiv?
• AngularJs direktiivid ja reguleerimisalad
• Kontrollerite kasutamine koos direktiividega
• Kuidas luua korduvkasutatavaid direktiive
• AngularJS-i direktiivid ja komponendid - ng-transclude
• Pesastatud direktiivid
• Sündmuste käsitlemine direktiivis

Kuidas luua kohandatud direktiiv?

Vaatame näite selle kohta, kuidas saame kohandatud direktiivi luua.

Meie puhul süstitakse kohandatud direktiiviga lihtsalt div-märgendit, millel on direktiivi kutsumisel meie lehel tekst "AngularJS Tutorial".

Guru99 Global Event

Koodi selgitus:

1. Loome kõigepealt oma nurgarakenduse jaoks mooduli. See on vajalik kohandatud direktiivi loomiseks, kuna direktiiv luuakse selle mooduli abil.
2. Loome nüüd kohandatud direktiivi nimega "ngGuru" ja määratleme funktsiooni, millel on meie direktiivi kohandatud kood.

Märge:-

Pange tähele, et direktiivi määratlemisel oleme määratlenud selle kui ngGuru, tähega 'G' aga suurtähena. Ja kui pääseme sellele juurde oma div-märgendilt kui direktiiv, siis pääseme sellele juurde kui ng-guru. Nii saab nurgeline aru rakenduses määratletud kohandatud direktiividest. Esiteks peaks tollidirektiivi nimi algama tähtedega „ng”. Teiseks tuleks sidekriipsu sümbol „-” mainida ainult direktiivi kutsumisel. Ja kolmandaks, esimene täht, mis järgneb tähtedele ng, võib direktiivi määratlemisel olla kas väike või suur.

3. Me kasutame malli parameetrit, mille parameeter määratleb nurgeline kohandatud direktiivide jaoks. Selles määratleme, et alati, kui seda direktiivi kasutatakse, kasutage lihtsalt malli väärtust ja sisestage see kutsekoodi.
4. Siin kasutame nüüd oma kohandatud loodud "ng-guru" direktiivi. Kui seda teeme, sisestatakse nüüd siin malli jaoks määratletud väärtus
   Nurga JS-i õpetus
   .

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

• Ülaltoodud väljund näitab selgelt, et brauseris kuvatakse meie kohandatud ng-guru direktiiv, millel on kohandatud teksti kuvamiseks määratletud mall.

AngularJs direktiivid ja reguleerimisalad

Reguleerimisala on määratletud kui liim, mis seob kontrolleri vaatega, hallates andmeid vaate ja kontrolleri vahel.

Kohandatud AngularJs-i direktiivide loomisel on neil vaikimisi juurdepääs vanemkontrolleris olevale ulatusobjektile.

Sel moel on tavadirektiivil peakontrollerile edastatud andmeid lihtne kasutada.

Vaatame näidet selle kohta, kuidas saame oma kohandatud direktiivis kasutada vanemkontrolleri ulatust.

Guru99 Global Event

Koodi selgitus:

1. Kõigepealt loome kontrolleri nimega "DemoController". Selles määratleme muutuja nimega tutorialName ja kinnitame selle ühes väites objekti ulatusele - $ scope.tutorialName = "Nurkne JS".
2. Oma kohandatud direktiivis võime muutujat kutsuda avaldise abil "tutorialName". Sellele muutujale oleks juurdepääs, kuna see on määratletud kontrolleris "DemoController", millest saaks selle direktiivi vanem.
3. Viitame kontrollerile div-märgendis, mis toimib meie vanema div-märgendina. Pange tähele, et see tuleb kõigepealt teha, et meie kohandatud direktiiv pääseks juurde muutujale tutorialName.
4. Lõpuks lihtsalt lisame oma div-sildile oma kohandatud direktiivi "ng-guru".

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

• Ülaltoodud väljund näitab selgelt, et meie kohandatud direktiiv "ng-guru" kasutab vanemkontrolleris ulatust muutuja tutorialName.

Kontrollerite kasutamine koos direktiividega

Nurk annab võimaluse pääseda kontrolleri liikme muutujale otse kohandatud direktiividest, ilma et oleks vaja reguleerimisala objekti.

See on mõnikord vajalik, kuna rakenduses võib teil olla mitu reguleerimisala objekti, mis kuuluvad mitmele kontrollerile.

Seega on suur tõenäosus, et võite eksida, kui pääsete juurde vale kontrolleri ulatusobjektile.

Sellise stsenaariumi korral on võimalus oma direktiivis konkreetselt öelda "Ma tahan sellele konkreetsele kontrollerile juurde pääseda".

Vaatame näite, kuidas seda saavutada.

Guru99 Global Event

Koodi selgitus:

1. Kõigepealt loome kontrolleri nimega "DemoController". Selles määratleme muutuja nimega "tutorialName" ja seekord kinnitame selle selle asemel, et kinnitada see objekti objektile, otse kontrollerile.
2. Oma kohandatud direktiivis mainime konkreetselt, et soovime kasutada kontrollerit "DemoController", kasutades kontrolleri parameetri märksõna.
3. Loome parameetri "controllerAs" abil viite kontrollerile. Selle määratleb nurk ja see on viis kontrolleri viitamiseks viitena.

   Märkus: - Direktiivis on võimalik juurde pääseda mitmele kontrollerile, määrates vastava kontrolleri plokid, kontrollerid ja mallilaused.

4. Lõpuks kasutame oma mallis 3. etapis loodud viidet ja liikmesmuutujat, mis kinnitati 1. kontrolleril otse kontrolleri külge.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljund näitab selgelt, et kohandatud direktiiv on eriti juurdepääs DemoControllerile ja sellele lisatud liikmemuutujale tutorialName ning kuvab teksti "Nurga".

Kuidas luua korduvkasutatavaid direktiive

Nägime juba tavadirektiivide jõudu, kuid saame selle oma korduvkasutatavate direktiivide loomisega uuele tasemele viia.

Oletame näiteks, et tahtsime sisestada koodi, mis näitaks allpool olevaid HTML-silte alati mitmel ekraanil, mis on põhimõtteliselt ainult kasutaja "Nimi" ja "Vanus" sisend.

Selle funktsiooni taaskasutamiseks mitmel ekraanil ilma iga kord kodeerimiseta loome nende juhtnuppude hoidmiseks nurga all juhtpuldi või käsu (kasutaja nimi ja nimi).

Nii et selle asemel, et sisestada iga kord sama kood allpool olevale ekraanile, võime selle koodi tegelikult direktiivisse manustada ja selle igal ajal lisada.

Vaatame näidet selle saavutamiseks.

Guru99 Global Event

Koodi selgitus:

1. Meie kohandatud direktiivi koodijupis muudetakse vaid väärtust, mis antakse meie kohandatud direktiivi malliparameetrile.

   Plaani viie sildi või teksti asemel sisestame tegelikult "Nime" ja "Vanuse" 2 sisendjuhtimissüsteemi kogu fragmendi, mis tuleb meie lehel näidata.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Ülaltoodud väljundist näeme, et kohandatud direktiivi malli koodilõik lisatakse lehele.

AngularJS-i direktiivid ja komponendid - ng-transclude

Nagu me juba varem mainisime, on Angular mõeldud HTML-i funktsionaalsuse laiendamiseks. Ja me oleme juba näinud, kuidas saaksime koodi sisestamist kohandatud taaskasutatavate direktiivide abil.

Kuid tänapäevases veebirakenduste arenduses on olemas ka veebikomponentide arendamise kontseptsioon. Mis tähendab põhimõtteliselt oma HTML-siltide loomist, mida saab kasutada meie koodi komponentidena.

Seega annab nurk veel ühe taseme HTML-siltide laiendamiseks, andes võimaluse sisestada atribuute HTML-i siltidesse.

Seda teeb silt " ng-transclude ", mis on omamoodi seade, mis ütleb nurga all, et jäädvustada kõik, mis on märgistuses direktiivi sees.

Võtame näite, kuidas seda saavutada.

Guru99 Global Event

Angular JS

Koodi selgitus:

1. Kasutame käsku, et määratleda kohandatud HTML-i silt nimega "pane" ja lisame funktsiooni, mis paneb sellele märgendile kohandatud koodi. Meie kohandatud paanimärgend kuvab väljundis musta nurkaga ristkülikus teksti "AngularJS".
2. Atribuuti "transclude" tuleb nimetada tõeseks, mida nurk nõuab selle sildi meie DOM-i sisestamiseks.
3. Ulatuses määratleme atribuudi pealkiri. Atribuudid on tavaliselt määratletud nime / väärtuse paaridena, näiteks: nimi = "väärtus". Meie puhul on atribuudi nimi meie paani HTML-märgendis "pealkiri". Nurknõue on nõue "@". Seda tehakse nii, et kui 5. sammus käivitatakse rea pealkiri = {{title}}, lisatakse atribuudi pealkirja kohandatud kood paani HTML-märgendile.
4. Pealkirja atribuutide kohandatud kood, mis tõmbab meie juhtimiseks lihtsalt kindla musta piiri.
5. Lõpuks kutsume oma kohandatud HTML-i märgendit koos määratletud atribuudiga pealkiri.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

• Väljund näitab selgelt, et paani html5 sildi atribuudiks on määratud kohandatud väärtus "Angular.JS".

Pesastatud direktiivid

Nurga all olevaid direktiive saab pesitseda. Nagu sisemoodulid või funktsioonid mis tahes programmeerimiskeeles, peate võib-olla ka teineteisesse direktsioone sisse põimima.

Sellest saate paremat arusaamist, vaadates allpool toodud näidet.

Selles näites loome kaks direktiivi, mida nimetatakse "väliseks" ja "sisemiseks".

• Sisemises direktiivis kuvatakse tekst nimega "Sisemine".
• Ehkki välimine direktiiv kutsub sisemist direktiivi tegelikult üles, et kuvada tekst nimega "Sisemine".

Guru99 Global Event

Koodi selgitus:

1. Loome direktiivi, mille nimi on "väline", mis käitub nagu meie vanemdirektiiv. Seejärel kutsub see direktiiv üles sisemist direktiivi.
2. Piirang: 'E' on vajalik nurga all, et tagada sisemise direktiivi andmete kättesaadavus välisele direktiivile. Täht „E” on sõna „element” lühike vorm.
3. Siin loome sisemise käskkirja, mis kuvab div-märgendis teksti "Sisemine".
4. Välisdirektiivi mallis (samm # 4) nimetame sisemist käsku. Nii et siin süstime malli sisemisest direktiivist välimisse.
5. Lõpuks kutsume otse välja välise direktiivi.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundi põhjal

• On näha, et kutsutud on nii välimine kui ka sisemine direktiiv ning kuvatakse mõlema div-sildi tekst.

Sündmuste käsitlemine direktiivis

Selliseid hiireklõpse või nupuvajutusi saab juhtida direktiivide siseselt. Seda tehakse lingi funktsiooni abil. Lingifunktsioon võimaldab direktiivil end HTML-lehel DOM-elementide külge kinnitada.

Süntaks:

Lingi elemendi süntaks on näidatud allpool

ng-kordus

link: function ($scope, element, attrs)

Linkimisfunktsioon aktsepteerib tavaliselt kolme parameetrit, sealhulgas ulatus, element, millega direktiiv on seotud, ja sihtelemendi atribuudid.

Vaatame näite selle kohta, kuidas seda saavutada.

Guru99 Global Event
Click Me

Koodi selgitus:

1. Kasutame nurkades määratletud linkimisfunktsiooni, et anda direktiividele juurdepääs HTML DOM-i sündmustele.
2. Me kasutame märksõna "element", kuna soovime reageerida HTML DOM-i elemendi sündmusele, mis on meie puhul element "div". Seejärel kasutame funktsiooni "sidumine" ja ütleme, et soovime elemendi klõpsamise sündmusele lisada kohandatud funktsionaalsuse. Klõpsu sõna on märksõna, mida kasutatakse mis tahes HTML-juhtelemendi klõpsamise sündmuse tähistamiseks. Näiteks HTML-nupu juhtelementil on kliki sündmus. Kuna meie näites soovime lisada meie devi sildi klikiüritusele kohandatud koodi, kasutame märksõna 'click'.
3. Siinkohal ütleme, et soovime asendada elemendi sisemine HTML (meie juhul div element) tekstiga „Sa klõpsasid mind!”.
4. Siin määratleme oma div-märgendi ng-guru kohandatud direktiivi kasutamiseks.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

• Esialgu kuvatakse kasutajale tekst „Click Me”, kuna see on div-märgendis algselt määratletud. Kui klõpsate tegelikult div-märgendil, kuvatakse allpool olev väljund

Kokkuvõte

• Võib luua ka kohandatud direktiivi, mida saab kasutada koodi sisestamiseks põhirakendusse.
• Kohandatud käskkirju saab teha teatud kontrolleris ulatusega objektis määratletud liikmetele helistamiseks, kasutades märksõnu "Controller", "controllerAs" ja "template".
• Direktiivid võivad olla sisestatud ka sisseehitatud funktsionaalsuse pakkumiseks, mida võib vaja minna sõltuvalt rakenduse vajadusest.
• Direktiive saab muuta ka korduvkasutatavaks, et neid saaks kasutada mitmesuguste veebirakenduste jaoks vajaliku ühise koodi sisestamiseks.
• Direktiive saab kasutada ka kohandatud HTML-siltide loomiseks, millel oleks oma funktsioon, mis on määratletud vastavalt ärinõuetele.
• DOM-i sündmuste, näiteks nupu- ja hiireklõpsude haldamiseks saab sündmusi käsitleda ka direktiivides.