Kuinka luoda mukautettu direktiivi AngularJS: ssä esimerkin avulla

Mikä on mukautettu direktiivi?

Angular Js: n mukautettu direktiivi on käyttäjän määrittelemä direktiivi, jolla on haluamasi toiminnot. Vaikka AngularJS: llä on paljon tehokkaita direktiivejä laatikosta, joskus vaaditaan mukautettuja direktiivejä.

Tässä opetusohjelmassa opit-

• Kuinka luoda oma direktiivi?
• AngularJs-direktiivit ja soveltamisalat
• Ohjainten käyttö direktiivien kanssa
• Kuinka luoda uudelleenkäytettäviä direktiivejä
• AngularJS-direktiivit ja komponentit - ng-transclude
• Sisäkkäiset direktiivit
• Tapahtumien käsittely direktiivissä

Kuinka luoda oma direktiivi?

Katsotaanpa esimerkki siitä, miten voimme luoda mukautetun direktiivin.

Mukautettu direktiivi tapauksessamme yksinkertaisesti ruiskuttaa div-tagin, jossa on teksti "AngularJS Tutorial" sivullamme, kun direktiiviä kutsutaan.

Guru99 Global Event

Koodin selitys:

1. Luomme ensin moduulin kulmasovelluksellemme. Tätä tarvitaan mukautetun direktiivin luomiseen, koska direktiivi luodaan tätä moduulia käyttämällä.
2. Luomme nyt mukautetun direktiivin nimeltä "ngGuru" ja määrittelemme funktion, jolla on mukautettu koodi direktiivillemme.

Huomautus:-

Huomaa, että määritellessämme direktiiviä olemme määrittäneet sen ngGuruksi ja kirjaimella 'G' isolla kirjaimella. Ja kun käytämme sitä div-tagistamme direktiivinä, käytämme sitä ng-guruna. Näin kulmikas ymmärtää sovelluksessa määritetyt mukautetut direktiivit. Ensinnäkin mukautetun direktiivin nimen tulisi alkaa kirjaimilla 'ng'. Toiseksi väliviiva - - tulisi mainita vain kutsuttaessa direktiiviä. Kolmanneksi ensimmäinen kirjain, joka seuraa kirjaimia ng, määriteltäessä direktiiviä, voi olla joko pieni tai iso kirjain.

3. Käytämme malliparametria, jonka Angular määrittelee parametriksi mukautetuille direktiiveille. Tässä määritämme, että aina kun tätä direktiiviä käytetään, käytä vain mallin arvoa ja lisää se kutsukoodiin.
4. Tässä käytämme nyt räätälöityä "ng-guru" -direktiiviämme. Kun teemme tämän, arvo "määritimme mallillemme"
   Angular JS Tutorial
   "syötetään nyt tähän.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

• Yllä oleva lähtö osoittaa selvästi, että mukautettu ng-guru-direktiivimme, jonka malli on määritetty mukautetun tekstin näyttämistä varten, näkyy selaimessa.

AngularJs-direktiivit ja soveltamisalat

Laajuus määritellään liimana, joka sitoo ohjaimen näkymään hallitsemalla näkymän ja ohjaimen välistä dataa.

Kun luot mukautettuja AngularJs-direktiivejä, niillä on oletusarvoisesti pääsy pääohjaimen laajuusobjektiin.

Tällä tavalla mukautetun direktiivin on helppoa hyödyntää pääohjaimelle välitettäviä tietoja.

Katsotaanpa esimerkkiä siitä, miten voimme käyttää vanhemman ohjaimen laajuutta mukautetussa direktiivissä.

Guru99 Global Event

Koodin selitys:

1. Luomme ensin ohjaimen nimeltä "DemoController". Tässä määritellään muuttuja nimeltä tutorialName ja liitetään se laajuusobjektiin yhdessä lauseessa - $ scope.tutorialName = "AngularJS".
2. Mukautetussa direktiivissä voimme kutsua muuttujaa "tutorialName" käyttämällä lauseketta. Tämä muuttuja olisi käytettävissä, koska se on määritelty ohjaimessa "DemoController", josta tulee tämän direktiivin vanhempi.
3. Viitamme ohjaimen div-tagiin, joka toimii vanhempana div-tagina. Huomaa, että tämä on tehtävä ensin, jotta mukautettu direktiivi pääsisi muuttujaan tutorialName.
4. Kiinnitämme vihdoin vain mukautetun direktiivin "ng-guru" div-tagiimme.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

• Yllä oleva lähtö osoittaa selvästi, että mukautettu direktiivimme "ng-guru" käyttää pääohjaimessa olevaa laajuusmuuttujaa tutorialName.

Ohjainten käyttö direktiivien kanssa

Kulma antaa mahdollisuuden käyttää ohjaimen jäsenmuuttujaa suoraan mukautetuista direktiiveistä ilman laajuusobjektin tarvetta.

Tämä on välttämätöntä ajoittain, koska sovelluksessa voi olla useita laajuusobjekteja, jotka kuuluvat useisiin ohjaimiin.

Joten on suuri mahdollisuus, että voit tehdä virheen päästäksesi väärän ohjaimen laajuusobjektiin.

Tällaisissa tilanteissa on tapa mainita direktiivissä nimenomaisesti sanomalla "Haluan käyttää tätä erityistä rekisterinpitäjää".

Katsotaanpa esimerkki siitä, miten voimme saavuttaa tämän.

Guru99 Global Event

Koodin selitys:

1. Luomme ensin ohjaimen nimeltä "DemoController". Tässä määritellään muuttuja nimeltä "tutorialName" ja tällä kertaa sen sijaan, että kiinnitämme sen laajuusobjektiin, liitämme sen suoraan ohjaimeen.
2. Mukautetussa direktiivissämme mainitsemme nimenomaisesti, että haluamme käyttää ohjainta "DemoController" käyttämällä ohjaimen parametrien avainsanaa.
3. Luomme viitteen ohjaimeen parametrilla "controllerAs". Tämän määrittelee kulma, ja se on tapa viitata ohjaimeen referenssinä.

   Huomaa: - On mahdollista käyttää useita ohjaimia direktiivissä määrittelemällä vastaavat ohjaimen lohkot, controllerA: t ja mallilausekkeet.

4. Lopuksi mallissamme käytämme vaiheessa 3 luotua viittausta ja jäsenmuuttujaa, joka liitettiin suoraan ohjaimeen vaiheessa 1.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Tulos osoittaa selvästi, että mukautettu direktiivi käyttää erityisesti DemoController-ohjelmaa ja siihen liitettyä jäsenmuuttujaa tutorialName ja näyttää tekstin "Kulma".

Kuinka luoda uudelleenkäytettäviä direktiivejä

Näimme jo mukautettujen direktiivien voiman, mutta voimme viedä sen seuraavalle tasolle rakentamalla omat uudelleenkäytettävät direktiivimme.

Sanotaan esimerkiksi, että halusimme injektoida koodia, joka näyttää alla olevat HTML-tunnisteet aina useilla näytöillä, mikä on pohjimmiltaan vain syöttö käyttäjän "Nimi" ja "Ikä".

Jos haluat käyttää tätä toimintoa uudelleen useilla näytöillä koodaamatta joka kerta, luomme kulmasuunnassa pääohjauksen tai -käskyn, jolla pidetään näitä säätimiä ("käyttäjän nimi" ja "ikä").

Joten nyt sen sijaan, että kirjoittaisimme saman koodin alla olevalle näytölle joka kerta, voimme todella upottaa tämän koodin direktiiviin ja upottaa sen milloin tahansa.

Katsotaanpa esimerkki siitä, miten voimme saavuttaa tämän.

Guru99 Global Event

Koodin selitys:

1. Mukautetun direktiivin koodinpätkässä muutos on vain arvo, joka annetaan mukautetun direktiivin malliparametrille.

   Suunnitelman viiden tunnisteen tai tekstin sijaan syötämme tosiasiallisesti "2" - ja "ikä" -nimisen 2 syötesäätimen osan, joka on näytettävä sivullamme.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Edellä olevasta lähdöstä voimme nähdä, että mukautetun direktiivin mallin koodinpätkä lisätään sivulle.

AngularJS-direktiivit ja komponentit - ng-transclude

Kuten jo aiemmin mainitsimme, Angularin on tarkoitus laajentaa HTML: n toiminnallisuutta. Ja olemme jo nähneet, kuinka voimme saada koodin injektoinnin käyttämällä mukautettuja uudelleenkäytettäviä direktiivejä.

Mutta nykyaikaisessa verkkosovelluskehityksessä on myös käsite verkkokomponenttien kehittämisestä. Mikä tarkoittaa periaatteessa omien HTML-tunnisteiden luomista, joita voidaan käyttää komponentteina koodissamme.

Siksi kulma tarjoaa toisen tason voimaa HTML-tunnisteiden laajentamiseen antamalla kyvyn pistää määritteitä itse HTML-tunnisteisiin.

Tämän tekee " ng-transclude " -tunniste, joka on eräänlainen asetus kertomaan kulmikkaalle kaappaamaan kaikki, mikä on direktiivin sisällä merkinnässä.

Otetaan esimerkki siitä, miten voimme saavuttaa tämän.

Guru99 Global Event

Angular JS

Koodin selitys:

1. Käytämme direktiiviä määrittelemään mukautetun HTML-tagin, jonka nimi on "pane", ja lisäämällä toiminto, joka laittaa jonkin mukautetun koodin tälle tagille. Lähdössä mukautetun ruudun tagi näyttää tekstin "AngularJS" suorakulmiossa, jossa on yhtenäinen musta reunus.
2. "Transclude" -attribuutti on mainittava tosi, jota kulma vaatii, jotta tämä tagi voidaan lisätä DOM: iimme.
3. Laajuudessa määritämme otsikkomääritteen. Attribuutit määritellään yleensä nimi / arvo-pareiksi, kuten: nimi = "arvo". Meidän tapauksessamme ruudun HTML-tagissamme olevan attribuutin nimi on "title". "@" -Symboli on vaatimus kulmasta. Tämä tehdään niin, että kun rivin otsikko = {{title}} suoritetaan vaiheessa 5, otsikkomääritteen mukautettu koodi lisätään ruudun HTML-tagiin.
4. Otsikkomääritteiden mukautettu koodi, joka vain piirtää kiinteän mustan reunan hallintaan.
5. Lopuksi kutsumme mukautettua HTML-tagia yhdessä määritetyn otsikkomääritteen kanssa.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

• Lähtö osoittaa selvästi, että ruudun html5 -tunnisteen otsikkomääritteeksi on asetettu "Kulma.JS" mukautettu arvo.

Sisäkkäiset direktiivit

Kulmalliset direktiivit voidaan sisäkkäin. Kuten sisäiset moduulit tai toiminnot millä tahansa ohjelmointikielellä, saatat joutua upottamaan direktiivejä toisiinsa.

Voit saada paremman käsityksen tästä näkemällä alla oleva esimerkki.

Tässä esimerkissä luomme kaksi direktiiviä nimeltä "ulompi" ja "sisempi".

• Sisempi direktiivi näyttää tekstin nimeltä "Sisempi".
• Vaikka ulompi direktiivi todella kehottaa sisäistä direktiiviä näyttämään tekstin nimeltä "Sisempi".

Guru99 Global Event

Koodin selitys:

1. Luomme direktiivin, jonka nimi on "ulompi", joka käyttäytyy vanhempana direktiivinä. Sitten tämä direktiivi kutsuu "sisäistä" direktiiviä.
2. Rajoitus: 'E' vaaditaan kulmalla sen varmistamiseksi, että sisädirektiivin tiedot ovat ulomman direktiivin käytettävissä. Kirjain 'E' on sanan 'elementti' lyhyt muoto.
3. Tässä luomme sisäisen käskyn, joka näyttää tekstin "Inner" div-tagissa.
4. Ulkoisen direktiivin mallissa (vaihe # 4) kutsumme sisäistä direktiiviä. Joten täällä injektoimme mallin sisäisestä direktiivistä ulkoiseen direktiiviin.
5. Lopuksi kutsumme suoraan ulomman direktiivin.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Lähdöstä

• Voidaan nähdä, että sekä ulko- että sisädirektiivit on kutsuttu ja molempien div-tunnisteiden teksti näytetään.

Tapahtumien käsittely direktiivissä

Tapahtumat, kuten hiiren napsautukset tai napin napsautukset, voidaan hoitaa itse direktiivien sisällä. Tämä tehdään linkkitoiminnolla. Linkitystoiminto antaa direktiivin liittää itsensä HTML-sivun DOM-elementteihin.

Syntaksi:

Linkki-elementin syntaksit on esitetty alla

ng-toista

link: function ($scope, element, attrs)

Linkkitoiminto hyväksyy normaalisti 3 parametria, mukaan lukien laajuuden, elementin, johon direktiivi liittyy, ja kohde-elementin attribuutit.

Katsotaanpa esimerkkiä siitä, miten voimme saavuttaa tämän.

Guru99 Global Event
Click Me

Koodin selitys:

1. Käytämme linkkitoimintoa kulmamäärityksen mukaisesti antamaan direktiivien kyvyn käyttää HTML DOM: n tapahtumia.
2. Käytämme elementti-avainsanaa, koska haluamme vastata HTML DOM -elementin tapahtumaan, joka on meidän tapauksessamme "div" -elementti. Sitten käytämme "sitoa" -toimintoa ja sanomme, että haluamme lisätä mukautettuja toimintoja elementin napsautustapahtumaan. Napsautussana on avainsana, jota käytetään merkitsemään minkä tahansa HTML-ohjaimen napsautustapahtuma. Esimerkiksi HTML-painikkeen ohjaimessa on napsautustapahtuma. Koska esimerkissämme haluamme lisätä mukautetun koodin dev-tagimme napsautustapahtumaan, käytämme click-avainsanaa.
3. Tässä sanomme, että haluamme korvata elementin sisäisen HTML-koodin (meidän tapauksessamme div-elementin) tekstillä 'Napsautit minua!'.
4. Tässä määritellään div-tagimme käyttämään ng-guru-mukautettua direktiiviä.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

• Aluksi teksti "Napsauta minua" näytetään käyttäjälle, koska tämä on alun perin määritelty div-tagissa. Kun napsautat div-tagia, alla oleva tulos näkyy

Yhteenveto

• Voidaan myös luoda mukautettu direktiivi, jota voidaan käyttää koodin syöttämiseen pääkulmasovellukseen.
• Mukautettuja direktiivejä voidaan kutsua tietyn ohjaimen laajuusobjektissa määritellyille jäsenille käyttämällä 'Controller', 'controllerAs' ja 'template' avainsanoja.
• Direktiivejä voidaan myös sisäkkäin tarjota upotetuille toiminnoille, joita voidaan tarvita sovelluksen tarpeesta riippuen.
• Direktiivit voidaan myös tehdä uudelleenkäytettäviksi, jotta niitä voidaan käyttää yleisen koodin syöttämiseen, jota voidaan tarvita erilaisiin verkkosovelluksiin.
• Direktiivejä voidaan käyttää myös luomaan mukautettuja HTML-tunnisteita, joilla olisi omat toiminnot määritelty liiketoiminnan vaatimusten mukaisesti.
• Tapahtumia voidaan myös käsitellä direktiiveissä DOM-tapahtumien, kuten napin ja hiiren napsautusten, käsittelemiseksi.