AngularJS:n mukautettu direktiivi: Mallit, laajuus ja transsulointi

⚡ Älykäs yhteenveto

AngularJS:n mukautetut direktiivit laajentavat HTML:ää itse määrittelemilläsi uudelleenkäytettävillä toiminnoilla. Direktiivitehdas palauttaa määritelmäobjektin, ja AngularJS liittää kyseisen toiminnan aina, kun vastaava elementti, attribuutti, luokka tai kommentti esiintyy merkinnässä.

🏗️ Rekisteröinti: Module.directive-metodi ottaa normalisoidun nimen ja tehdasfunktion, joka palauttaa direktiivin määritelmäobjektin.
🔤 Nimeäminen: Nimet ovat camelCase-kotelon sisällä JavaSkripti ja kebab-tapaus HTML:n sisällä, joten ngGuru sivulla lukee ng-guru.
🎯 Vastaavat: restrict-ominaisuus päättää, vastaako AngularJS elementtiä, attribuuttia, luokkaa vai kommenttia, ja se käyttää oletusarvoisesti EA:ta.
🧬 Laajuuskäyttöoikeus: Direktiivi jakaa oletusarvoisesti pääkentän laajuusalueen, kun taas scope-optio rakentaa eristetyn laajuusalueen @-, =-, &- tai <-sidonnoilla.
🔗 Linkin toiminto: Linkkifunktio vastaanottaa laajuus-, element- ja attribuutit, ja se on oikea paikka DOM-kuuntelijoille ja siivoukselle.
🧱 Sävellys: Direktiivit sijoittuvat sisäkkäin, kietovat mielivaltaisen merkinnän transkluusion avulla ja paljastavat API:n sisaruksille ohjaimen kautta.
⚠️ Tuen tila: AngularJS:n elinkaari päättyi 31. joulukuuta 2021, eikä siihen ole saatavilla enää korjauksia tai tietoturvakorjauksia.

Lue lisää

Mikä on mukautettu direktiivi AngularJS:ssä?

A tullidirektiivi AngularJS:ssä on käyttäjän määrittämä direktiivi, joka laajentaa HTML:ää itse kirjoittamallasi käyttäytymisellä. Se rekisteröidään moduuli käyttämällä ”direktiivi”-funktiota, ja AngularJS liittää sen mihin tahansa vastaavaan elementtiin tai attribuuttiin sivulla. Vaikka AngularJS:ssä on paljon tehokkaita sisäänrakennetut direktiivit suoraan laatikosta, kuten ng-toista, joskus vaaditaan mukautettuja direktiivejä.

⚠️ korjaus: Alkuperäisessä tekstissä sanottiin, että mukautettu direktiivi "korvaa elementin, johon sitä käytetään". Oletusarvoisesti se ei: template on lisätty sisällä vastaava elementti. Vaihtotarpeet replace: true, vanhentunut AngularJS 1.3:sta lähtien.

⚠️ Tukitiedote: AngularJS saavutettu käyttöiän päättyessä 31. joulukuuta 2021 eikä saa enää uusia korjauksia tai tietoturvakorjauksia. Kaikki alla oleva pysyy oikein olemassa olevan AngularJS 1.x -koodin ylläpitämiseksi; nykyaikaisessa Angularissa vastineet ovat komponentit ja attribuuttidirektiivit.

Syy mukautettuun direktiiviin turvautumiseen on toisto. Kun sama merkintä tai DOM-kytketty koodi näkyy useilla näytöillä, direktiivi muuttaa sen yhdeksi nimetyksi tagiksi.

Kuinka luoda mukautettu direktiivi?

Katsotaanpa esimerkkiä siitä, miten voimme luoda mukautetun AngularJS-direktiivin.

Tässä tapauksessa mukautettu direktiivi yksinkertaisesti lisää sivullemme div-tagin, jossa on teksti ”Angular JS Tutorial”, kun direktiiviä kutsutaan.

Alla olevassa selityksin varustetussa kuvakaappauksessa on numeroitu listauksen neljä osaa, jotka on selitetty sen jälkeen.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.directive('ngGuru',function(){

    return {
        template: '<div>Angular JS Tutorial</div>'
    }
    });

</script>

</body>
</html>

⚠️ Varoitus — tässä luettelossa säilytetyt viat: Koodi on toistettu täsmälleen sellaisenaan julkaistuna. Kolme virhettä toistuu jokaisessa tässä luetellussa kohdassa: chrset="UTF 8" tulisi olla charset="UTF-8"; angular.js ja angular.min.js molemmat latautuvat, joten AngularJS latautuu kahdesti; ja angular-route.js latautuu ennen tiedostoa, josta se on riippuvainen.

Code Selitys

Luomme ensin a moduuli AngularJS-sovelluksellemme. Tämä on pakollinen mukautetun direktiivin luomiseksi, koska direktiivi luodaan tätä moduulia käyttäen.
Luomme nyt mukautettua direktiiviä nimeltä "ng"Guru” ja määrittelemällä tehdasfunktion, joka sisältää direktiivimme mukautetun koodin.
Käytämme template-parametria, joka on AngularJS:n mukautetuille direktiiveille määrittelemä parametri. Tässä määrittelemme, että aina kun tätä direktiiviä käytetään, käytetään vain template-parametrin arvoa ja injektoidaan se kutsuvaan koodiin.
Tässä käytämme nyt itse luomaamme "ng-guru"-direktiiviä. Kun teemme näin, mallipohjallemme määrittämämme arvo, <div>Angular JS Tutorial</div>, ruiskutetaan nyt tähän.

Direktiivien nimeäminen ja normalisointi

Nimien välinen ristiriita JavaSkripti ja HTML hämmentävät useimpia aloittelijoita. AngularJS normalisoituu jokaisen elementin ja attribuutin nimen ennen sen vastaavuutta: se poistaa kaikki x- or data- etuliite ja muuntaa sitten nimen, jonka erottimet ovat -, : or _ camelCaseen. Siksi ngGuru tulitikut ng-guru, ja miksi data-ng-guru toimii myös. camelCase-muoto on oikea nimi; kebab-case on yksinkertaisesti tapa, jolla se kirjoitetaan HTML:ssä.

⚠️ korjaus: Alkuperäisessä tekstissä sanottiin, että mukautetun direktiivin nimen "tulisi alkaa kirjaimilla 'ng'". virallinen AngularJS-dokumentaatio neuvoo päinvastaista: älä koskaan lisää omien direktiiviesi etuliitteitä ng, tai ne voivat törmätä tulevaan sisäänrakennettuun lausekkeeseen. Käytä omaa etuliitettäsi, kuten g99Guru kirjoitettuna g99-guru.

Jos koodi suoritetaan onnistuneesti, tämä tuloste tulee näkyviin.

lähtö:

Tuloste osoittaa selvästi, että mukautettu ng-guru-direktiivimme, jossa on mukautetun tekstin näyttämiseen määritelty mallipohja, näytetään selaimessa. Seuraava vaihe on lisätä mallipohjaan jotain uudelleenkäytettävää.

Kuinka luoda uudelleenkäytettäviä direktiivejä

Näimme jo mukautettujen direktiivien voiman, mutta voimme viedä sen uudelle tasolle rakentamalla omia uudelleenkäytettäviä direktiivejämme.

Oletetaan esimerkiksi, että halusimme lisätä koodin, joka näyttäisi aina alla olevat HTML-tagit useilla näytöillä. Tämä on pohjimmiltaan vain käyttäjän "nimi" ja "ikä".

Jotta voimme käyttää tätä fragmenttia uudelleen useilla näytöillä koodaamatta sitä joka kerta, luomme AngularJS:ssä pääkomponentin eli direktiivin näiden kahden komponentin säilyttämistä varten.

Joten nyt, sen sijaan, että toistaisimme kyseistä merkintää jokaisella näytöllä, upotamme sen direktiiviin ja kutsumme direktiiviä. Alla oleva kuvakaappaus osoittaa ainoan rivin, joka muuttuu.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            template: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Code Selitys

Mukautetun direktiivin koodinpätkässä muuttuu vain malliparametrille annettu arvo. Pelkän tagin tai tekstirivin sijaan syötämme kokonaisen osan kahdesta syöttökentästä "Nimi"- ja "ikä"-kentille, jotka on näytettävä sivullamme.

💡 Vinkki: Näin pitkä mallipohja kuuluu omaan tiedostoonsa. Vaihda template varten templateUrl: 'name-age.html'.

Jos koodi suoritetaan onnistuneesti, tämä tuloste tulee näkyviin.

lähtö:

Yllä olevasta tulosteesta näemme, että mukautetun direktiivin mallin koodinpätkä lisätään sivulle. Malli on edelleen staattinen, joten seuraava vaihe on syöttää siihen tiedot.

AngularJS-direktiivit ja -laajuusalueet

laajuus määritellään liimaksi, joka sitoo ohjaimen näkymään hallitsemalla dataa näkymän ja ohjaimen välillä.

Kun luot mukautettuja AngularJS-direktiivejä, niillä on oletusarvoisesti pääsy pääohjaimen scope-objektiin. Se on sama scope-objekti, ei kopio.

Tällä tavalla mukautetun direktiivin on helppo hyödyntää pääohjaimelle välitettyjä tietoja.

Katsotaanpa esimerkkiä siitä, miten voimme käyttää pääohjaimen laajuutta mukautetussa direktiivissämme. Alla olevassa kuvakaappauksessa on numeroitu neljä vaihetta.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {
        $scope.tutorialName = "Angular JS";

    });

        app.directive('ngGuru',function(){
        return {
         template: '<div>{{tutorialName}}</div>'
     }
    });

</script>

</body>
</html>

Code Selitys

Luomme ensin ohjaimen nimeltä ”DemoController”. Tässä määrittelemme muuttujan nimeltä tutorialName ja liitämme sen scope-objektiin yhdellä lausekkeella: $scope.tutorialName = "Angular JS".
Mukautetussa käskyssämme 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 pää.
Viitaamme ohjaimeen div-tunnisteessa, joka toimii emo-div-tunnisteena. Huomaa, että tämä on tehtävä ensin, jotta mukautettu ohjeemme voi käyttää tutorialName-muuttujaa.
Lopuksi liitämme mukautetun ohjeemme "ng-guru" div-tunnisteeseen.

Jos koodi suoritetaan onnistuneesti, tämä tuloste tulee näkyviin.

lähtö:

Yllä oleva tuloste osoittaa selvästi, että mukautettu direktiivimme "ng-guru" käyttää pääohjaimen tutorialName-muuttujaa. Pääohjaimen laajuusmuuttujaan liittyvän laajuusmuuttujaan liittyvän laajuusmuuttuja jakaminen on kätevää, mutta ei aina toivottavaa.

Ohjainten käyttö ohjeiden kanssa

AngularJS antaa mahdollisuuden päästä ohjaimen jäsenmuuttujaan suoraan mukautetuista ohjeista ilman laajuusobjektin tarvetta.

Tämä on joskus välttämätöntä, koska sovelluksella voi olla useita useille ohjaimille kuuluvia laajuusobjekteja, joten on suuri mahdollisuus käyttää vahingossa väärän ohjaimen laajuusobjektia.

Tällaisessa tilanteessa on olemassa tapa sanoa direktiivistäni erityisesti "Haluan käyttää tätä ohjainta".

Katsotaanpa esimerkkiä siitä, miten voimme saavuttaa tämän. Kuvakaappaus numeroi neljä vaihetta.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru99=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function() {
        this.tutorialName = "Angular";

    });

     app.directive('ngGuru99',function(){
        return {
         controller: 'DemoController',

          controllerAs: 'ctrl',

          template: '{{ctrl.tutorialName}}'
     };
    });

</script>

</body>
</html>

Code Selitys

Luomme ensin ohjaimen nimeltä ”DemoController”. Tässä määrittelemme muuttujan nimeltä ”tutorialName”, ja tällä kertaa sen liittämisen sijaan suoraan ohjaimeen scope-objektiin.
Mukautetussa ohjeessamme mainitsemme erityisesti, että haluamme käyttää ohjainta "DemoController" käyttämällä ohjainparametrin avainsanaa.
Luomme viittauksen ohjaimeen käyttämällä “controllerAs”-parametria. Tämä on määritelty AngularJS:ssä, ja se on tapa viitata ohjaimeen aliaksen avulla.
Lopuksi, mallissamme käytämme vaiheessa 3 luotua viitettä ja vaiheessa 1 suoraan ohjaimeen liitettyä jäsenmuuttujaa.

Huomautus: Useisiin ohjaimiin on mahdollista päästä käsiksi direktiivissä määrittämällä ohjaimen vastaavat lohkot, controllerAs-lausekkeet ja template-lausekkeet. Päästäkseen vanhempi käytä sen sijaan direktiivin ohjainta require.

Jos koodi suoritetaan onnistuneesti, tämä tuloste tulee näkyviin.

lähtö:

Tuloste osoittaa selvästi, että mukautettu direktiivi käyttää DemoControlleria ja siihen liitettyä jäsenmuuttujaa tutorialName, ja näyttää tekstin "Angular". Molemmat lähestymistavat lukevat edelleen jaetusta laajuusalueesta, minkä eristävä laajuus estää.

Miten @-, =-, &- ja <-sidokset eroavat toisistaan eristysalueella

Direktiiviä, joka jakaa pääasiallisen soveltamisalansa, voidaan käyttää vain kerran ohjainta kohden, koska kaksi kopiota kilpailisivat samoista muuttujista. scope objekti luo eristä laajuus: direktiivi ei näe mitään ulkopuolelta lukuun ottamatta luettelemiasi ominaisuuksia. Jokainen merkintä käyttää etuliitesymbolia, joka määrittää, miten sen arvo kulkee.

Symboli	Suunta	Saatu arvo	Käytä sitä
@	Yksisuuntainen sisäänkäynti	Attribuutti interpoloituna merkkijonona	Otsikot, etiketit, mikä tahansa pelkkä teksti
=	Kaksisuuntainen	Elävä objekti tai arvo itsessään	Mallit, joihin direktiivi kirjoittaa takaisin
&	Lähtevä puhelu	Funktio, joka arvioi lauseketta ulomman laajuuden sisällä	Takaisinkutsut, kuten sulkemisen tai tallennuksen yhteydessä
<	Yksisuuntainen sisäänkäynti	Arvioitu arvo, jota ei koskaan kirjoiteta ylöspäin	Vain luku -tilassa oleva data, lisätty AngularJS 1.5:ssä

💡 Vinkki: Tavoitella < ennen =Yksisuuntainen sidonta on halvempaa seurata ja estää komponenttia muuttamasta kutsujan tietoja hiljaisesti. Seuraavassa osiossa käytetään @.

AngularJS-direktiivit ja -komponentit: ng-transclude

Kuten aiemmin mainitsimme, AngularJS on tarkoitettu laajentamaan toiminnallisuutta HTML. Ja olemme jo nähneet, kuinka voimme lisätä koodia käyttämällä mukautettuja uudelleenkäytettäviä direktiivejä.

Mutta nykyaikaisessa web-sovelluskehityksessä on myös kehityksen käsiteping verkkokomponentteja, mikä pohjimmiltaan tarkoittaa omien HTML-tagien luomista, joita voidaan käyttää komponentteina koodissamme.

Tästä syystä AngularJS tarjoaa uuden tason tehoa HTML-tagien laajentamiseen antamalla mahdollisuuden kääriä kutsujan lisäämät merkinnät tagin sisään.

Tämän tekee "ng-transclude”-direktiivi, joka käskee AngularJS:n tallentamaan kaiken mukautetun tagin sisälle sijoitetun merkinnän ja pudottamaan sen mallineeseen siinä vaiheessa.

Otetaan esimerkki siitä, miten voimme saavuttaa tämän. Kuvakaappaus numeroi seuraavat viisi kohtaa.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <pane title="{{title}}">Angular JS</pane>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('pane',function(){
        return {

            transclude:true,
            scope :{title:'@'},
            template: '<div style="border: 1px solid black;"> '+
                        '<ng-transclude></ng-transclude>'+
                            '</div>'
        };
    });

</script>

</body>
</html>

Code Selitys

Käytämme direktiiviä määritelläksemme mukautetun HTML-tagin nimeltä "pane", jonka koodin toimittaa tehdasfunktio. Tulosteessa pane-tagi näyttää tekstin "Angular JS" suorakulmiossa, jossa on yhtenäinen musta reunus.
”Transclude”-ominaisuuden arvoksi on asetettava true, mikä käskee AngularJS:ää säilyttämään alkuperäisen sisäisen merkinnän ja asettamaan sen saataville ng-transclude.
Scope-objektissa määritämme otsikkosidonnan. Attribuutit kirjoitetaan yleensä nimi/arvo-pareina, kuten name="value"Tässä tapauksessa paneelin tagin attribuutti on ”title”, ja ”@”-symboli pyytää AngularJS:ää kopioimaan kyseisen attribuutin interpoloituna merkkijonona.
Mallipohja piirtää ohjausobjektillemme yhtenäisen mustan reunuksen ja merkitsee paikan, johon transkriboitava merkintä lisätään.
Lopuksi kutsumme mukautettua HTML-tagia yhdessä määritetyn title-attribuutin kanssa.

⚠️ korjaus: Alkuperäisessä tekstissä ”@”-merkkiä kuvailtiin ”Angularin vaatimukseksi”. Se ei ole muodollisuus: @ on yksi neljästä yllä olevan taulukon eristyslaajuussidossymbolista ja tuottaa aina merkkijonon. Tämä mallipohja ei myöskään koskaan renderöi {{title}}eikä mikään ohjain määrittele title, joten vain transligroitu teksti on näkyvissä.

Jos koodi suoritetaan onnistuneesti, tämä tuloste tulee näkyviin.

lähtö:

Tulosteessa mukautettu ruutuelementti renderöidään reunallisena laatikkona, joka sisältää transkriboidun tekstin ”Angular JS”.

Direktiivi voi sisältää myös muita direktiivejä, joilla kootaan suurempia komponentteja.

Sisäkkäiset direktiivit

AngularJS:n direktiivit voivat olla sisäkkäisiä. Kuten minkä tahansa muun ohjelman sisäiset moduulit tai funktiot ohjelmointikieli, saatat joutua upottamaan käskyjä toisiinsa.

Saat paremman käsityksen tästä katsomalla alla olevaa esimerkkiä.

Tässä esimerkissä luomme 2 direktiiviä nimeltä "ulkoinen" ja "sisäinen".

Sisäinen direktiivi näyttää tekstin nimeltä "Inner".
Vaikka ulompi direktiivi itse asiassa kutsuu sisäistä direktiiviä näyttämään tekstin nimeltä "sisäinen".

Alla olevassa kuvakaappauksessa on merkitty molempien direktiivien määritelmät ja kohta, jossa toinen kutsuu toista.

</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <outer></outer>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('outer',function(){
        return {

            restrict:'E',
            template: '<div><h1>Outer</h1><inner></inner></div>',
        }});

    app.directive('inner',function(){
        return {

            restrict:'E',
            template: '<div><h1>Inner</h1></div>',
        }
    });
</script>

</body>
</html>

⚠️ Varoitus — vika säilytetty tässä listauksessa: Julkaistu listaus alkaa klo </head>, aukon puuttuessa <!DOCTYPE html>, <html> ja <head> rivit. Lisää ne ennen sen suorittamista.

Code Selitys

Luomme direktiiviä nimeltä "ulkoinen", joka toimii emodirektiivinä. Tässä direktiivissä viitataan sitten "sisäiseen" direktiiviin.
restrict:'E' optio käskee AngularJS:ää vastaamaan kutakin direktiiviä elementti nimi, minkä vuoksi ne voidaan kirjoittaa tageina <outer> ja <inner>Kirjain 'E' on sanan 'Element' lyhenne.
Täällä luomme sisäisen direktiivin, joka näyttää tekstin "Inner" div-tunnisteessa.
Ulkoisen direktiivin mallineessa kutsumme sisäistä direktiiviä. Tässä siis ruiskutamme sisäisen direktiivin mallinetta ulkoiseen direktiiviin.
Lopuksi vaadimme suoraan ulkoista direktiiviä.

⚠️ korjaus: Alkuperäisessä tekstissä väitettiin restrict:'E' vaaditaan ”sen varmistamiseksi, että sisäisen direktiivin tiedot ovat ulkoisen direktiivin käytettävissä”. Se ei tee mitään sellaista; se vain ohjaa miten direktiivi voidaan kirjoittaa. Sisäkkäisyys toimii, koska kääntäjä palaa jatkuvasti juuri lisäämäänsä mallipohjaan. Tietojen jakamiseen käytä require ja controller.

Jos koodi suoritetaan onnistuneesti, tämä tuloste tulee näkyviin.

lähtö:

Ulostulosta,

Voidaan nähdä, että sekä ulkoista että sisäistä direktiiviä on kutsuttu, ja molempien div-tagien teksti näytetään.

Merkintöjen renderöinti on vain puolet siitä, mitä direktiivi tekee; toinen puoli on käyttäjään reagointia.

Tapahtumien käsittely direktiivissä

Tapahtumat Kuten hiiren tai painikkeen napsautukset, voidaan käsitellä itse direktiivien sisältä. Tämä tehdään linkkifunktion avulla. Linkkifunktion avulla direktiivi voi liittää itsensä HTML-sivun DOM-elementteihin.

Syntaksi:

Linkkifunktion syntaksi on alla olevan kaltainen.

link: function ($scope, element, attrs)

Linkkifunktio hyväksyy normaalisti kolme parametria: laajuuden, elementin, johon direktiivi liittyy, ja kohdeelementin attribuutit. Kaksi muuta, pakollinen ohjain ja transclude-funktio, saapuvat, kun niitä sovelletaan.

Käännösvaihe vs. linkkivaihe

AngularJS käsittelee direktiivin kahdessa vaiheessa, ja sen tietäminen, kumpi on kumpi, kertoo koodisi sijainnin.

Koota suoritetaan kerran template-elementille ennen kuin mitään laajuutta on luotu. Se sopii kaikkien kloonien jakamiin rakenteellisiin muokkauksiin.
Linkki suoritetaan kerran instanssia kohden, kun malline on kloonattu ja laajuus on liitetty. DOM-kuuntelijat ja laajuuslukemat kuuluvat tähän.

Koska käännöksellä ei ole laajuusaluetta, kaikki dataa tarvitsevat kuuluvat linkkiin, minkä vuoksi alla oleva esimerkki määrittelee link yksin.

Katsotaanpa esimerkkiä siitä, miten voimme saavuttaa tämän. Kuvakaappaus numeroi alla olevat neljä pistettä.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru="">Click Me</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            link:function($scope,element,attrs) {
                element.bind('click',function () {
                    element.html('You clicked me');
                });}
        }});
</script>

</body>
</html>

Code Selitys

Käytämme AngularJS:ssä määriteltyä linkkifunktiota antaaksemme direktiiville mahdollisuuden käyttää HTML DOM:n tapahtumia.
Käytämme avainsanaa 'element', koska haluamme vastata HTML DOM -elementin tapahtumaan, joka meidän tapauksessamme on "div"-elementti. Sitten käytämme "bind"-funktiota lisätäksemme mukautettuja toimintoja elementin click-tapahtumaan. 'Click'-sana on avainsana, jota käytetään merkitsemään minkä tahansa HTML-komponentin click-tapahtumaa.
Tässä tarkoitamme, että haluamme korvata elementin sisäisen HTML-koodin, tässä tapauksessa div-elementin, tekstillä 'You clicked me'.
Tässä määrittelemme div-tunnisteen käyttämään ng-guru mukautettua direktiiviä.

💡 Vinkki: Direktiivin tulisi siivota itsensä jälkeen. Poista kaikki kuuntelijat, jotka elävät sen sisällä olevan elementin jälkeen. element.on('$destroy', ...)tai sivulta vuotaa muistia.

Jos koodi suoritetaan onnistuneesti, tämä tuloste tulee näkyviin.

lähtö:

Aluksi käyttäjälle näytetään teksti 'Click Me', koska se on määritelty div-tagin sisällä. Kun napsautat div-tagia, näkyviin tulee alla oleva tuloste.

Jokaisessa yllä olevassa esimerkissä käytettiin yhtä tai kahta saman määritelmäobjektin ominaisuutta. Koko joukko kannattaa säilyttää.ping käteen.

Direktiivin määritelmä Objektin ominaisuudet Viite

Direktiivitehtaan palauttama objekti on Direktiivin määritelmäobjektiJokainen ominaisuus vastaa yhteen kysymykseen direktiivin toiminnasta.

Omaisuus	oletusarvo	Mitä se tekee
rajoittaa	EA	Mitkä muodot vastaavat toisiaan: E-elementti, A-attribuutti, C-luokka, M-kommentti
sapluuna	ei mitään	Rivimerkintä lisätty vastaavaan elementtiin
mallipohjan URL-osoite	ei mitään	Mallipohjan tiedostopolku, noudettu kerran ja tallennettu välimuistiin
laajuus	väärä	false jakaa pääobjektin laajuuden, true luo lapsen, objekti eristää
ohjain	ei mitään	API:n paljastava konstruktori, jota muut direktiivit voivat vaatia
ohjainAs	ei mitään	Mallin sisällä olevan ohjaimen alias
edellyttää	ei mitään	Toisen direktiivin ohjain injektoitavaksi; ^ etsii vanhemmilta, ^^ ohittaa itsensä, ? valinnainen
linkkiä	ei mitään	Instanssikohtainen funktio: scope, element, attrs, controller, transcludeFn
koota	ei mitään	Suoritetaan kerran mallipohjalla ennen kuin mitään vaikutusaluetta luodaan
transkludoida	väärä	Säilyttää alkuperäisen sisäisen merkinnän ng-transclude-funktiolle
prioriteetti	0	Käännä järjestys jaetulle elementille; korkeampi suoritetaan ensin
terminaali	väärä	Pysäyttää kyseisen elementin alemman prioriteetin direktiivit
korvata	väärä	Vaihtaa elementin mallineeseen. Vanhentunut versiosta 1.3 lähtien.

💡 Vinkki: Aloita restrict, template ja link, lisätä scope uudelleenkäyttöä varten, controller ja require direktiivistä direktiiviin -kutsuille ja jätä priority ja terminal yksin.

UKK

AngularJS 1.5:een lisätty komponentti on direktiivi, jolla on mielipidepohjaiset oletusarvot: vain elementtejä vastaava täsmäytys, eristävä laajuus ja ohjain. Käytä komponenttia itsenäiseen näkymään ja direktiiviä, kun tarvitset linkkitason DOM-käyttöoikeutta.

Yleensä nimeä ei normalisoitu oikein, tai restrict-arvo sulkee pois käyttämäsi muodon. Nimimerkillä my rekisteröity direktiivi.Box vastaa my-box-arvoa, ei mybox-arvoa, ja elementtitunnisteen on sisällettävä E.

Kyllä. AI Assistantit yhdistävät isolaattialueen Input- ja Output-dekoraattoreihin ja mallineen komponenttimallineen. RevTarkista transkluusio- ja linkitysfunktioiden DOM-koodi käsin, koska ne harvoin käännetään siististi.

Tekoälyavustajat luovat yksikkötesti rungot, jotka kääntävät direktiivin, liittävät siihen laajuusosan ja esittävät väitteitä renderöidyn tulosteen perusteella. Ne ovat hyviä listaamaan reunatapauksia, joten käsittele luotuja väitteitä lähtökohtaisesti.

Käytä templateUrl-tiedostoa, kun merkintä ylittää rivin tai kaksi. Tiedostoa voi muokata tavallisilla HTML-työkaluilla, ja se noudetaan vain kerran, minkä jälkeen se tarjoillaan mallinevälimuistista jokaista myöhempää esiintymää varten.

AngularJS:n mukautettu direktiivi: Mallit, laajuus ja transsulointi

Mikä on mukautettu direktiivi AngularJS:ssä?

Kuinka luoda mukautettu direktiivi?

Code Selitys

Direktiivien nimeäminen ja normalisointi

Kuinka luoda uudelleenkäytettäviä direktiivejä

Code Selitys

AngularJS-direktiivit ja -laajuusalueet

Code Selitys

Ohjainten käyttö ohjeiden kanssa

Code Selitys

Miten @-, =-, &- ja <-sidokset eroavat toisistaan eristysalueella

AngularJS-direktiivit ja -komponentit: ng-transclude

Code Selitys

Sisäkkäiset direktiivit

Code Selitys

Tapahtumien käsittely direktiivissä

Käännösvaihe vs. linkkivaihe

Code Selitys

Direktiivin määritelmä Objektin ominaisuudet Viite

UKK

Tiivistä tämä viesti seuraavasti:

Tilaa uutiskirje

Mikä on mukautettu direktiivi AngularJS:ssä?

Kuinka luoda mukautettu direktiivi?

Code Selitys

Direktiivien nimeäminen ja normalisointi

Kuinka luoda uudelleenkäytettäviä direktiivejä

Code Selitys

AIHEESEEN LIITTYVÄT ARTIKKELIT

AngularJS-direktiivit ja -laajuusalueet

Code Selitys

Ohjainten käyttö ohjeiden kanssa

Code Selitys

Miten @-, =-, &- ja <-sidokset eroavat toisistaan ​​eristysalueella

AngularJS-direktiivit ja -komponentit: ng-transclude

Code Selitys

Sisäkkäiset direktiivit

Code Selitys

Tapahtumien käsittely direktiivissä

Käännösvaihe vs. linkkivaihe

Code Selitys

Direktiivin määritelmä Objektin ominaisuudet Viite

UKK

Tiivistä tämä viesti seuraavasti:

Tilaa uutiskirje

Miten @-, =-, &- ja <-sidokset eroavat toisistaan eristysalueella