EGYEDI irányelvek az AngularJS-ben: Hogyan készítsünk? [Példák]

Mi az a vámirányelv?

A Egyéni irányelv Az AngularJS-ben egy felhasználó által definiált direktíva, amely lehetővé teszi a felhasználók számára, hogy a kívánt függvényeket használják a HTML-funkciók kiterjesztésére. A „direktíva” függvénnyel definiálható, és lecseréli azt az elemet, amelyhez használjuk. Annak ellenére, hogy az AngularJS számos hatékony direktívát tartalmaz, néha egyéni direktívákra van szükség.

Hogyan készítsünk egyedi irányelvet?

Vessünk egy példát arra, hogyan hozhatunk létre egyéni AngularJS direktívát.

Az egyéni direktíva esetünkben egyszerűen egy div címkét fog beilleszteni, amely az „AngularJS Tutorial” szöveget tartalmazza az oldalunkon, amikor az irányelvet hívják.

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

Kód Magyarázat

Először létrehozunk a modul szögletes alkalmazásunkhoz. Ez egy egyéni direktíva létrehozásához szükséges, mert az irányelv ezzel a modullal jön létre.
Most létrehozunk egy „ngGuru” nevű egyedi direktívát, és meghatározunk egy függvényt, amely egyedi kóddal rendelkezik az irányelvünkhöz.Megjegyzés: - Ne feledje, hogy a direktíva meghatározásakor ngGuruként határoztuk meg, a „G” betűvel a nagybetűvel. És amikor a div címkénkből érjük el direktívaként, akkor ng-guruként érjük el. Az angular így értelmezi az alkalmazásban meghatározott egyéni direktívákat. Először is az egyéni direktíva nevének „ng” betűkkel kell kezdődnie. Másodszor, a „-” kötőjelet csak az irányelv meghívásakor szabad megemlíteni. Harmadszor pedig az „ng” betűket követő első betű az irányelv meghatározásakor lehet kis- vagy nagybetű.
A sablon paramétert használjuk, amely az Angular által meghatározott paraméter az egyéni direktívákhoz. Ebben azt definiáljuk, hogy amikor ezt a direktívát használjuk, akkor csak használja a sablon értékét, és adja be a hívó kódba.
Itt most az egyedileg létrehozott „ng-guru” direktívánkat használjuk. Amikor ezt megtesszük, a sablonunkhoz megadott érték " Angular JS oktatóanyag ” most ide kell beadni.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A fenti kimenet egyértelműen mutatja, hogy az egyéni ng-guru direktívánk, amely az egyéni szöveg megjelenítéséhez meghatározott sablont tartalmazza, megjelenik a böngészőben.

AngularJs irányelvek és hatályok

A hatókör az a ragasztó, amely a vezérlőt a nézethez köti a nézet és a vezérlő közötti adatok kezelésével.

Egyéni AngularJs direktívák létrehozásakor alapértelmezés szerint hozzáférnek a szülővezérlőben lévő hatókör objektumhoz.

Ily módon az egyéni direktíva számára egyszerűvé válik a fő vezérlőnek átadott adatok felhasználása.

Nézzünk egy AngularJS egyéni direktíva példát arra vonatkozóan, hogyan használhatjuk fel a szülővezérlő hatókörét az egyéni direktívánkban.

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

Kód Magyarázat

Először létrehozunk egy „DemoController” nevű vezérlőt. Ebben definiálunk egy tutorialName nevű változót, és egy utasításban csatoljuk a hatókör objektumhoz – $scope.tutorialName = “AngularJS”.
Egyéni direktívánkban a „tutorialName” változót egy kifejezés használatával hívhatjuk meg. Ez a változó elérhető lenne, mert a „DemoController” vezérlőben van definiálva, amely ennek az irányelvnek a szülője lesz.
A vezérlőre hivatkozunk egy div címkében, amely szülő div címkénkként fog működni. Vegye figyelembe, hogy ezt először meg kell tenni annak érdekében, hogy egyéni direktívánk hozzáférjen a tutorialName változóhoz.
Végül csak az egyéni „ng-guru” direktívánkat csatoljuk a div címkénkhoz.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A fenti kimenet egyértelműen mutatja, hogy az „ng-guru” egyéni direktívánk a tutorialName hatókörváltozót használja a szülővezérlőben.

Vezérlők használata direktívákkal

Angular megadja a lehetőséget közvetlenül az egyéni direktívákból érheti el a vezérlő tagváltozóját anélkül, hogy szükség lenne a hatókör objektumra.

Ez időnként szükségessé válik, mert egy alkalmazásban előfordulhat, hogy több hatókörobjektum több vezérlőhöz tartozik.

Tehát nagy az esélye annak, hogy elköveti azt a hibát, hogy rossz vezérlő hatókör objektumához fér hozzá.

Ilyen forgatókönyvekben van mód arra, hogy kifejezetten megemlítsem, hogy „hozzá akarok férni ehhez a konkrét vezérlőhöz” az irányelvemből.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

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

Kód Magyarázat

Először létrehozunk egy „DemoController” nevű vezérlőt. Ebben definiálunk egy „tutorialName” nevű változót, és ezúttal ahelyett, hogy a hatókör objektumhoz csatolnánk, közvetlenül a vezérlőhöz csatoljuk.
Egyéni direktívánkban külön megemlítjük, hogy a „DemoController” vezérlőt a vezérlőparaméter kulcsszó használatával szeretnénk használni.
A „controllerAs” paraméterrel hivatkozást hozunk létre a vezérlőre. Ezt az Angular határozza meg, és így lehet a vezérlőt referenciaként hivatkozni.

Jegyzet: -Egy direktívában több vezérlőhöz is hozzá lehet férni a vezérlő, controllerAs és sablon utasítások megfelelő blokkjainak megadásával.

Végül a sablonunkban a 3. lépésben létrehozott hivatkozást használjuk, és az 1. lépésben közvetlenül a vezérlőhöz csatolt tagváltozót.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A kimenet világosan mutatja, hogy az egyéni direktíva különösen a DemoController-t és a hozzá csatolt tutorialName tagváltozót éri el, és megjeleníti az „Angular” szöveget.

Hogyan készítsünk újra felhasználható direktívákat

Már láttuk az egyéni direktívák erejét, de ezt a következő szintre emelhetjük saját újrafelhasználható direktíváink elkészítésével.

Tegyük fel például, hogy olyan kódot akartunk beilleszteni, amely mindig az alábbi HTML-címkéket jeleníti meg több képernyőn, ami alapvetően csak a felhasználó „nevének” és „életkorának” a bemenete.

Ahhoz, hogy ezt a funkciót több képernyőn is újra használhassuk, minden alkalommal kódolás nélkül, létrehozunk egy fő vezérlőelemet vagy direktívát szögben ezeknek a vezérlőknek a tárolására (a felhasználó „név” és „életkora”).

Tehát most, ahelyett, hogy minden alkalommal ugyanazt a kódot írnánk be az alábbi képernyőre, ténylegesen beágyazhatjuk ezt a kódot egy direktívába, és bármikor beágyazhatjuk az irányelvet.

Lássunk egy példát, hogyan érhetjük el ezt.

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

Kód Magyarázat

Az egyéni direktíva kódrészletében csak az egyéni direktívánk sablonparaméterének adott értéke változik. Az ötös tervcímke vagy szöveg helyett valójában a 2 bemeneti vezérlőelem teljes töredékét adjuk meg a " Név” és „életkor”, amelyet fel kell tüntetni oldalunkon.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A fenti kimenetből láthatjuk, hogy az egyéni direktíva sablonjából származó kódrészlet hozzáadódik az oldalhoz.

AngularJS irányelvek és összetevők – ng-transclude

Ahogy korábban említettük, az Angular célja a funkcionalitás kiterjesztése HTML. És már láttuk, hogyan lehet kódbefecskendezést végezni egyéni újrafelhasználható direktívák használatával.

De a modern webalkalmazás-fejlesztésben is létezik webes összetevők fejlesztésének koncepciója. Ami alapvetően azt jelenti, hogy saját HTML címkéket készítünk, amelyeket a kódunkban komponensként használhatunk.

Ennélfogva az Angular egy újabb szintű erőt biztosít a HTML-címkék kiterjesztéséhez, mivel lehetővé teszi az attribútumok beillesztését a HTML-címkékbe.

Ezt a „ng-transclude” címke, amely egyfajta beállítás arra utasítja az angular-t, hogy rögzítse mindazt, ami a jelölésben a direktíván belül van.

Vegyünk egy példát, hogyan érhetjük el ezt.

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

Kód Magyarázat

Az irányelv segítségével meghatározunk egy egyéni HTML-címkét, melynek neve "pane", és hozzáadunk egy függvényt, amely egyéni kódot helyez el ehhez a címkéhez. A kimenetben az egyéni panelcímkénk az „AngularJS” szöveget fogja megjeleníteni egy téglalapban, fekete kerettel.
Az „transclude” attribútumot igazként kell megemlíteni, amelyre az angular-nak szüksége van ahhoz, hogy ezt a címkét beillessze a DOM-ba.
A hatókörben egy title attribútumot definiálunk. Az attribútumokat általában név/érték párokként határozzák meg, például: name=”value”. Esetünkben az attribútum neve a panel HTML-címkéjében „title”. A „@” szimbólum az angular követelménye. Ez úgy történik, hogy amikor a title={{title}} sort végrehajtja az 5. lépésben, a title attribútum egyéni kódja hozzáadásra kerül a panel HTML-címkéjéhez.
A cím attribútumainak egyéni kódja, amely csak egy szilárd fekete keretet rajzol az ellenőrzésünkhöz.
Végül meghívjuk egyéni HTML-címkénket a definiált title attribútummal együtt.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A kimenet egyértelműen mutatja, hogy a panel html5 címke title attribútuma az „Angular.JS” egyéni értékre van állítva.

Beágyazott direktívák

Az AngularJS direktívái egymásba ágyazhatók. Mint csak a belső modulok vagy funkciók bármelyikben programozási nyelv, előfordulhat, hogy direktívákat kell egymásba ágyaznia.

Ezt jobban megértheti az alábbi példa megtekintésével.

Ebben a példában 2 „külső” és „belső” direktívát hozunk létre.

A belső direktíva egy „Belső” nevű szöveget jelenít meg.
Míg a külső direktíva valójában meghívja a belső direktívát, hogy megjelenítse a „Belső” nevű szöveget.

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

Kód Magyarázat

Létrehozunk egy „külső” direktívát, amely szülő direktívánkként fog viselkedni. Ez az irányelv ezután felhívja a „belső” irányelvet.
Az "E" korlátozást az angular írja elő annak biztosítására, hogy a belső direktívából származó adatok elérhetőek legyenek a külső direktíva számára. Az „E” betű az „elem” szó rövid formája.
Itt létrehozzuk a belső direktívát, amely az „Inner” szöveget jeleníti meg egy div címkében.
A külső direktíva sablonjában (4. lépés) a belső direktívát hívjuk. Tehát itt a belső direktívából a külső direktívába fecskendezzük a sablont.
Végül pedig közvetlenül a külső irányelvre hivatkozunk.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A kimenetből,

Látható, hogy a külső és a belső direktívák is meghívásra kerültek, és mindkét div tag szövege megjelenik.

Az események kezelése direktívában

Események az ilyen egérkattintásokat vagy gombkattintásokat magából az direktívákból lehet kezelni. Ez a link funkció segítségével történik. A link funkció lehetővé teszi, hogy a direktíva csatlakozzon a DOM elemeihez egy HTML oldalon.

Syntax:

A link elem szintaxisa az alábbiak szerint látható

ng-ismétlés

link: function ($scope, element, attrs)

A link függvény általában 3 paramétert fogad el, beleértve a hatókört, az elemet, amelyhez a direktíva társítva van, és a célelem attribútumait.

Nézzünk egy példát arra, hogyan tudjuk ezt megvalósítani.

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

Kód Magyarázat

Az angular-ban definiált link függvényt használjuk, hogy lehetővé tegyük az direktíváknak a HTML DOM eseményeinek elérését.
Az "elem" kulcsszót azért használjuk, mert egy HTML DOM-elem eseményére szeretnénk válaszolni, ami esetünkben a "div" elem lesz. Ezután a „bind” függvényt használjuk, és azt mondjuk, hogy egyéni funkcionalitást szeretnénk hozzáadni az elem kattintási eseményéhez. A "kattintás" szó az a kulcsszó, amely bármely HTML-vezérlő kattintási eseményének jelölésére szolgál. Például a HTML gombvezérlőnek van egy kattintási eseménye. Mivel példánkban egy egyéni kódot szeretnénk hozzáadni a „dev” címkénk kattintási eseményéhez, a „click” kulcsszót használjuk.
Itt azt mondjuk, hogy az elem belső HTML-jét (esetünkben a div elemet) a 'Te kattintottál rám!' szöveggel szeretnénk helyettesíteni.
Itt definiáljuk a div címkénket az ng-guru egyéni direktíva használatához.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Kezdetben a "Kattintson rám" szöveg jelenik meg a felhasználó számára, mert ez az, amit kezdetben a div címkében határoztak meg. Ha ténylegesen rákattint a div címkére, az alábbi kimenet jelenik meg

Összegzésként

Létrehozhat egy egyéni direktívát is, amellyel kódot injektálhat a fő szögalkalmazásba.
Egyéni direktívák a 'Controller', 'controllerAs' és 'template' kulcsszavak használatával hívhatók meg a hatókör objektumban meghatározott tagok egy bizonyos vezérlőben.
Az irányelvek beágyazhatók is, hogy olyan beágyazott funkciókat biztosítsanak, amelyekre az alkalmazás igényeitől függően szükség lehet.
Az irányelvek újrafelhasználhatóvá is válhatnak, így felhasználhatók olyan közös kód beillesztésére, amelyre különféle webalkalmazásokba lehet szükség.
Az irányelvek felhasználhatók egyéni HTML-címkék létrehozására is, amelyek saját funkcionalitással rendelkeznek az üzleti követelményeknek megfelelően.
Az események direktívákon belül is kezelhetők a DOM események, például a gomb- és egérkattintások kezelésére.

Talán tetszene:

Mi az a vámirányelv?

Hogyan készítsünk egyedi irányelvet?

Kód Magyarázat

AngularJs irányelvek és hatályok

Kód Magyarázat

KAPCSOLÓDÓ CIKKEK

Vezérlők használata direktívákkal

Kód Magyarázat

Hogyan készítsünk újra felhasználható direktívákat

Kód Magyarázat

AngularJS irányelvek és összetevők – ng-transclude

Kód Magyarázat

Beágyazott direktívák

Kód Magyarázat

Az események kezelése direktívában

Kód Magyarázat

Összegzésként