MUKAUTETUT direktiivit AngularJS:ssä: Kuinka luoda? [Esimerkkejä]

Mikä on tullidirektiivi?

A tullidirektiivi AngularJS:ssä on käyttäjän määrittämä ohje, jonka avulla käyttäjät voivat käyttää haluttuja toimintoja HTML-toimintojen laajentamiseen. Se voidaan määrittää käyttämällä "direktiive"-funktiota, ja se korvaa elementin, johon sitä käytetään. Vaikka AngularJS:ssä on paljon tehokkaita direktiivejä valmiina, joskus tarvitaan mukautettuja direktiivejä.

Kuinka luoda mukautettu direktiivi?

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

Meidän tapauksessamme mukautettu direktiivi yksinkertaisesti lisää div-tunnisteen, jossa on teksti "AngularJS Tutorial" sivullamme, kun direktiiviä kutsutaan.

<!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>

Koodin selitys

Luomme ensin a moduuli kulmasovellukseemme. Tämä tarvitaan mukautetun ohjeen luomiseen, koska direktiivi luodaan tämän moduulin avulla.
Luomme nyt mukautetun ohjeen nimeltä "ngGuru" ja määrittelemme funktion, jolla on mukautettu koodi direktiivillemme.Huomautus: - Huomaa, että direktiiviä määriteltäessä olemme määrittäneet sen ngGuruksi, jossa on kirjain "G" isolla kirjaimella. Ja kun käytämme sitä div-tunnisteellamme käskynä, käytämme sitä ng-guruna. Näin angular ymmärtää sovelluksessa määritellyt mukautetut direktiivit. Ensinnäkin custom-direktiivin nimen tulee alkaa kirjaimilla "ng". Toiseksi yhdysviivamerkki "-" tulee mainita vain direktiiviä kutsuttaessa. Ja kolmanneksi ensimmäinen kirjain, joka seuraa kirjaimia "ng" direktiiviä määriteltäessä, voi olla joko pieni tai iso kirjain.
Käytämme malliparametria, joka on Angularin määrittelemä parametri mukautetuille direktiiveille. Tässä määrittelemme, että aina kun tätä direktiiviä käytetään, käytä vain mallin arvoa ja lisää se kutsukoodiin.
Tässä käytämme nyt mukautettua "ng-guru" -direktiiviämme. Kun teemme tämän, mallille määrittämämme arvo " Angular JS -opetusohjelma ” ruiskutetaan nyt tähän.

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

lähtö:

Yllä oleva tulos osoittaa selvästi, että mukautettu ng-guru-direktiivimme, jolla on mukautetun tekstin näyttämiseen määritetty malli, näytetään selaimessa.

AngularJs direktiivit ja soveltamisalat

Alue määritellään liimaksi, joka sitoo ohjaimen näkymään hallitsemalla näkymän ja ohjaimen välistä dataa.

Kun luot mukautettuja AngularJs-käskyjä, niillä on oletusarvoisesti pääsy pääohjaimen soveltamisalaobjektiin.

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

Katsotaanpa esimerkkiä AngularJS:n mukautetusta direktiivistä, kuinka voimme käyttää ylätason ohjaimen laajuutta mukautetussa direktiivissämme.

<!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>

Koodin selitys

Luomme ensin ohjaimen nimeltä "DemoController". Tässä määritämme muuttujan nimeltä tutorialName ja liitämme sen soveltamisalaobjektiin yhdessä lauseessa - $scope.tutorialName = "AngularJS".
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, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Yllä oleva tulos osoittaa selvästi, että mukautettu direktiivimme "ng-guru" käyttää laajuusmuuttujaa tutorialName pääohjaimessa.

Ohjainten käyttö direktiiveillä

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

Tämä on toisinaan tarpeen, koska sovelluksessa voi olla useita laajuusobjekteja, jotka kuuluvat useille ohjaimille.

Joten on suuri mahdollisuus, että saatat tehdä sen virheen, että käytät väärän ohjaimen soveltamisalaa.

Tällaisissa skenaarioissa on tapa mainita erikseen sanonta "Haluan käyttää tätä tiettyä ohjainta" käskystäni.

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

<!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>

Koodin selitys

Luomme ensin ohjaimen nimeltä "DemoController". Tässä määritämme muuttujan nimeltä "tutorialName", ja tällä kertaa sen sijaan, että liittäisimme sen laajuusobjektiin, liitämme sen suoraan ohjaimeen.
Mukautetussa ohjeessamme mainitsemme erityisesti, että haluamme käyttää ohjainta "DemoController" käyttämällä ohjainparametrin avainsanaa.
Luomme viittauksen ohjaimeen "controllerAs"-parametrilla. Tämän määrittelee Angular, ja se on tapa viitata säätimeen referenssinä.

Merkintä: -On mahdollista päästä käsiksi useisiin ohjaimiin direktiivissä määrittämällä vastaavat ohjainlohkot, controllerAs ja mallikäskyt.

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

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

lähtö:

Tulos osoittaa selvästi, että mukautettu direktiivi käyttää erityisesti DemoControlleria ja siihen liitettyä jäsenmuuttujaa tutorialName ja näyttää tekstin "Angular".

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ä koodia, joka näyttäisi aina alla olevat HTML-tunnisteet useilla näytöillä, mikä on pohjimmiltaan vain syöte käyttäjän "Nimelle" ja "ikälle".

Jos haluat käyttää tätä toimintoa uudelleen useilla näytöillä ilman koodausta joka kerta, luomme pääsäätimen tai ohjeen kulmassa pitämään nämä säätimet (käyttäjän "nimi" ja "ikä").

Joten nyt sen sijaan, että syöttäisimme saman koodin alla olevaan näyttöön joka kerta, voimme itse asiassa upottaa tämän koodin direktiiviin ja upottaa sen milloin tahansa.

Katsotaanpa esimerkkiä, kuinka voimme saavuttaa tämän.

<!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>

Koodin selitys

Muokatun käskyn koodinpätkässämme muuttuu vain arvo, joka annetaan mukautetun ohjeemme malliparametrille. Suunnitelman viisi -tunnisteen tai tekstin sijaan syötämme itse asiassa koko 2 syöttösäätimen fragmentin " Nimi" ja "ikä", jotka on näytettävä sivullamme.

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

lähtö:

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

AngularJS-direktiivit ja komponentit – ng-transclude

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

Mutta nykyaikaisessa verkkosovelluskehityksessä on myös ajatus web-komponenttien kehittämisestä. Mikä periaatteessa tarkoittaa omien HTML-tunnisteiden luomista, joita voidaan käyttää koodimme komponentteina.

Näin ollen angular tarjoaa toisen tason tehoa HTML-tunnisteiden laajentamiseen antamalla mahdollisuuden lisätä attribuutteja itse HTML-tunnisteisiin.

Tämän tekee "ng-transclude”-tunniste, joka on eräänlainen asetus, joka käskee Angularia kaappaamaan kaiken, mitä merkinnöissä on direktiivin sisällä.

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

<!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>

Koodin selitys

Käytämme direktiiviä määrittämään mukautetun HTML-tunnisteen nimeltä "pane" ja lisäämään funktion, joka lisää mukautetun koodin tälle tunnisteelle. Tulosteessa mukautettu ruututunniste näyttää tekstin "AngularJS" suorakulmiossa, jossa on kiinteä musta reuna.
"Transclude"-attribuutti on mainittava tosi, jota angular vaatii lisätäkseen tämän tunnisteen DOM:iin.
Laajuudessa määrittelemme otsikkoattribuutin. Attribuutit määritellään yleensä nimi/arvo-pareina, kuten: nimi=”arvo”. Meidän tapauksessamme ruudun HTML-tunnisteen attribuutin nimi on "title". "@"-symboli on vaatimus kulmasta. Tämä tehdään siten, että kun rivi title={{title}} suoritetaan vaiheessa 5, otsikkoattribuutin mukautettu koodi lisätään ruudun HTML-tunnisteeseen.
Otsikkomääritteiden mukautettu koodi, joka piirtää vain yhtenäisen mustan reunuksen valvontaamme varten.
Lopuksi kutsumme mukautettua HTML-tunnistettamme määritellyn title-attribuutin kanssa.

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

lähtö:

Tulos osoittaa selvästi, että ruudun html5-tunnisteen title-attribuutti on asetettu mukautettuun arvoon "Angular.JS".

Sisäkkäiset direktiivit

AngularJS:n direktiivit voivat olla sisäkkäisiä. Kuten vain sisäiset moduulit tai toiminnot missä tahansa 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".

</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>

Koodin selitys

Luomme direktiiviä nimeltä "ulkoinen", joka toimii emodirektiivinä. Tässä direktiivissä viitataan sitten "sisäiseen" direktiiviin.
Rajoitusta:'E' vaatii Angular sen varmistamiseksi, että sisäisen direktiivin tiedot ovat ulkoisen direktiivin käytettävissä. Kirjain 'E' on sanan 'Elementti' lyhyt muoto.
Täällä luomme sisäisen direktiivin, joka näyttää tekstin "Inner" div-tunnisteessa.
Ulkoisen direktiivin mallissa (vaihe 4) kutsumme sisäistä direktiiviä. Joten tänne ruiskutamme mallin sisäisestä direktiivistä ulkoiseen direktiiviin.
Lopuksi vaadimme suoraan ulkoista direktiiviä.

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

lähtö:

Ulostulosta,

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

Tapahtumien käsittely ohjeessa

Tapahtumat tällaisia hiiren napsautuksia tai painikkeiden napsautuksia voidaan käsitellä itse ohjeiden sisällä. Tämä tehdään linkkitoiminnolla. Linkkitoiminto mahdollistaa sen, että direktiivi voi liittää itsensä DOM-elementteihin HTML-sivulla.

Syntaksi:

Linkkielementin syntaksi on alla olevan kuvan mukainen

ng-toista

link: function ($scope, element, attrs)

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

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

<!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>

Koodin selitys

Käytämme kulmassa määriteltyä linkkitoimintoa antaaksemme ohjeille mahdollisuuden päästä käsiksi HTML DOM:n tapahtumiin.
Käytämme elementtiavainsanaa, koska haluamme vastata tapahtumaan HTML DOM -elementille, joka on meidän tapauksessamme "div"-elementti. Käytämme sitten "sidonta"-toimintoa ja sanomme, että haluamme lisätä mukautettuja toimintoja elementin napsautustapahtumaan. "Klikkaus"-sana on avainsana, jota käytetään kuvaamaan minkä tahansa HTML-komponentin napsautustapahtumaa. Esimerkiksi HTML-painikkeen ohjausobjektissa on napsautustapahtuma. Koska esimerkissämme haluamme lisätä mukautetun koodin "dev"-tunnisteemme napsautustapahtumaan, käytämme "click"-avainsanaa.
Tässä sanomme, että haluamme korvata elementin sisäisen HTML-koodin (tapauksessamme div-elementin) tekstillä "Sinä napsautit minua!".
Tässä määrittelemme div-tunnisteen käyttämään ng-guru mukautettua direktiiviä.

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

lähtö:

Aluksi käyttäjälle näytetään teksti "Click Me", koska tämä on alun perin määritelty div-tunnisteessa. Kun napsautat div-tunnistetta, alla oleva tulos näytetään

Yhteenveto

Voidaan myös luoda mukautettu direktiivi, jota voidaan käyttää koodin syöttämiseen pääkulmasovelluksessa.
Mukautetut käskyt voidaan saada kutsumaan tietyn ohjaimen soveltamisalaobjektissa määriteltyjä jäseniä käyttämällä 'Controller', 'controllerAs' ja 'template' avainsanoja.
Direktiivejä voidaan myös sisäkkäin upottaa toimintoja, joita voidaan tarvita sovelluksen tarpeesta riippuen.
Direktiivejä voidaan myös tehdä uudelleenkäytettäviksi, jotta niitä voidaan käyttää yhteisen koodin lisäämiseen, jota voidaan tarvita useissa verkkosovelluksissa.
Direktiiveillä voidaan myös luoda mukautettuja HTML-tageja, joilla on omat toiminnallisuutensa määritettynä liiketoiminnan vaatimusten mukaisesti.
Tapahtumia voidaan käsitellä myös ohjeiden sisällä DOM-tapahtumien, kuten painikkeen ja hiiren napsautusten, käsittelemiseksi.

Saatat tykätä:

Mikä on tullidirektiivi?

Kuinka luoda mukautettu direktiivi?

Koodin selitys

AngularJs direktiivit ja soveltamisalat

Koodin selitys

AIHEESEEN LIITTYVÄT ARTIKKELIT

Ohjainten käyttö direktiiveillä

Koodin selitys

Kuinka luoda uudelleenkäytettäviä direktiivejä

Koodin selitys

AngularJS-direktiivit ja komponentit – ng-transclude

Koodin selitys

Sisäkkäiset direktiivit

Koodin selitys

Tapahtumien käsittely ohjeessa

Koodin selitys

Yhteenveto