Mi az egyedi irányelv?
Az Angular Js egyéni irányelv a felhasználó által definiált irányelv a kívánt funkcióval. Annak ellenére, hogy az AngularJS-nek sok hatékony direktívája van a dobozból, néha egyedi irányelvekre van szükség.
Ebben az oktatóanyagban megtanulja-
- Hogyan hozhatunk létre egyedi irányelvet?
- AngularJs irányelvek és hatályok
- Vezérlők használata irányelvekkel
- Hogyan lehet újrafelhasználható irányelveket létrehozni
- AngularJS irányelvek és alkatrészek - ng-transzclude
- Beágyazott irányelvek
- Az események kezelése irányelvben
Hogyan hozhatunk létre egyedi irányelvet?
Vessen egy pillantást arra, hogyan hozhatunk létre egyedi irányelvet.
A szokásos irányelv esetünkben egyszerűen egy div tag beinjektálását írja elő, amelynek oldalán az "AngularJS Tutorial" szöveg található, amikor az irányelv meghívásra kerül.
Event Registration Guru99 Global Event
Kód Magyarázat:
- Először modult készítünk szögletes alkalmazásunkhoz. Erre szükség van egy egyedi irányelv létrehozásához, mert az irányelv ennek a modulnak a használatával jön létre.
- Most létrehozunk egy "ngGuru" nevű egyedi irányelvet, és meghatározunk egy olyan függvényt, amely egyedi kóddal rendelkezik az irányelvünkhöz.
Jegyzet:-
Ne feledje, hogy az irányelv meghatározása során ngGuru néven definiáltuk, a „G” betű pedig nagybetűvel. És amikor a div címkénkből irányelvként férünk hozzá, akkor ng-guruként érjük el. A szögletes így érti az alkalmazásban definiált egyedi irányelveket. Először az egyedi irányelv nevét „ng” betűkkel kell kezdeni. Másodszor a "-" kötőjelet csak az irányelv felhívásakor szabad megemlíteni. Harmadszor, az irányelv meghatározásakor az „ng” betűket követő első betű kis- vagy nagybetű lehet.
- Azt a sablonparamétert használjuk, amelyet az Angular által az egyéni irányelvekhez definiált paraméter. Ebben meghatározzuk, hogy amikor ezt az irányelvet használják, akkor csak használja a sablon értékét, és írja be a hívó kódba.
- Itt most felhasználjuk a saját készítésű "ng-guru" irányelvünket. Amikor ezt megtesszük, a "Angular JS Tutorial" sablonunkhoz megadott értéket most beírjuk ide.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
- A fenti kimenet egyértelműen megmutatja, hogy a böngészőben megjelenik az egyedi ng-guru irányelvünk, amelynek sablonja meg van határozva az egyedi szöveg megjelenítésére.
AngularJs irányelvek és hatályok
A hatókör 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 irányelvek létrehozásakor alapértelmezés szerint hozzáférhetnek a szülővezérlő hatókör-objektumához.
Ily módon megkönnyíti az egyéni irányelv számára a fő vezérlőnek továbbított adatok felhasználását.
Nézzünk meg egy példát arra, hogyan használhatjuk a szülővezérlő hatókörét az egyedi irányelvünkben.
Event Registration Guru99 Global Event
Kód Magyarázat:
- Először létrehozunk egy "DemoController" nevű vezérlőt. Ebben meghatározzuk a tutorialName nevű változót, és egy utasításban csatoljuk a hatókörobjektumhoz - $ scope.tutorialName = "SzögletesJS".
- Saját irányelvünkben egy kifejezés használatával "tutorialName" változót hívhatunk. Ez a változó hozzáférhető lenne, mert a "DemoController" vezérlőben van meghatározva, amely ennek az irányelvnek a szülője lesz.
- A vezérlőre egy div tagben hivatkozunk, amely a szülő div tagként fog működni. Ne feledje, hogy ezt először meg kell tenni annak érdekében, hogy egyéni irányelvünk hozzáférjen a tutorialName változóhoz.
- Végül csak hozzáillesztjük az "ng-guru" egyedi irányelvünket a div tagünkhöz.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
- A fenti kimenet világosan mutatja, hogy az "ng-guru" egyéni irányelvünk a szülővezérlőben a tutorialName hatókör változót használja.
Vezérlők használata irányelvekkel
Az Angular lehetőséget nyújt a vezérlő tagváltozójának közvetlen elérésére az egyedi irányelvekből, anélkül, hogy a hatókör objektumra lenne szükség.
Ez időnként szükségessé válik, mert egy alkalmazásban több hatókörű objektum lehet több vezérlőhöz tartozó.
Tehát nagy az esélye, hogy hibát követhet el, ha a rossz vezérlő hatókör-objektumához fér hozzá.
Ilyen esetekben van mód arra, hogy külön megemlítsem az irányelvemben azt a mondást, hogy „Hozzá akarok férni ehhez a speciális vezérlőhöz”.
Vessen egy pillantást arra, hogyan érhetjük el ezt.
Event Registration Guru99 Global Event
Kód Magyarázat:
- Először létrehozunk egy "DemoController" nevű vezérlőt. Ebben meghatározzuk a "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 irányelvünkben külön megemlítjük, hogy a "DemoController" vezérlőt szeretnénk használni a vezérlőparaméter kulcsszó használatával.
- A "controllerAs" paraméter segítségével létrehozunk egy hivatkozást a vezérlőre. Ezt az Angular határozza meg, és így lehet a vezérlőt referenciaként hivatkozni.
Megjegyzés: - Több vezérlőhöz is hozzáférhet egy irányelvben a vezérlő, a vezérlőA és a sablon utasítások megfelelő blokkjainak megadásával.
- Végül sablonunkban a 3. lépésben létrehozott referenciát használjuk, és az 1. lépésben közvetlenül a vezérlőhöz csatolt tagváltozót használjuk.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenet világosan mutatja, hogy az egyedi irányelv különösen a DemoControllerhez és a hozzá csatolt tutorialName tag változóhoz fér hozzá, és megjeleníti az "Angular" szöveget.
Hogyan lehet újrafelhasználható irányelveket létrehozni
Láttuk már az egyedi irányelvek erejét, de ezt a következő szintre emelhetjük saját újrafelhasználható irányelveink felépítésével.
Tegyük fel például, hogy olyan kódot akartunk injektálni, amely mindig az alábbi HTML címkéket jeleníti meg több képernyőn, ami alapvetően csak a felhasználó "Név" és "Kor" bejegyzése.
Ahhoz, hogy ezt a funkciót többször is használhassuk több képernyőn kódolás nélkül, szögben létrehozunk egy fő vezérlőt vagy irányelvet, hogy ezeket a vezérlőket (a felhasználó neve és kora) megtartsuk.
Tehát most ahelyett, hogy minden alkalommal ugyanazt a kódot adnánk meg az alábbi képernyőhöz, valóban beágyazhatjuk ezt a kódot egy irányelvbe, és azt bármikor beágyazhatjuk.
Lássunk egy példát arra, hogyan érhetjük el ezt.
Event Registration Guru99 Global Event
Kód Magyarázat:
- Egy egyedi irányelv kódrészletében mi változik, csak az az érték, amelyet az egyedi irányelvünk sablonparaméterének adunk meg.
Öt terves címke vagy szöveg helyett valójában a "Név" és az "Életkor" 2 beviteli vezérlőjének teljes töredékét írjuk be, amelyet meg kell jeleníteni az oldalunkon.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A fenti kimenetből láthatjuk, hogy az egyedi irányelv sablonjából származó kódrészlet hozzáadódik az oldalhoz.
AngularJS irányelvek és alkatrészek - ng-transzclude
Amint azt már korábban említettük, az Angular célja a HTML funkcionalitásának kiterjesztése. És már láttuk, hogyan lehet a kódinjekciót végrehajtani egyedi újrafelhasználható irányelvek használatával.
De a modern webalkalmazás-fejlesztés során létezik a web-összetevők fejlesztésének koncepciója is. Ami alapvetően azt jelenti, hogy saját HTML-címkéket kell létrehoznunk, amelyek komponensként használhatók a kódunkban.
Ennélfogva a szög további erőforrást biztosít a HTML-címkék kibővítéséhez, lehetővé téve az attribútumok injektálását magába a HTML-címkékbe.
Ezt az " ng-transclude " címke végzi , amely egyfajta beállítás arra, hogy szögletes legyen, hogy rögzítse mindazt, ami az irányelvben szerepel a jelölésben.
Vegyünk egy példát arra, hogyan érhetjük el ezt.
Event Registration Guru99 Global Event
Angular JS
Kód Magyarázat:
- Az irányelv segítségével meghatározzuk a „panel” nevű egyéni HTML-címkét, és hozzáadunk egy olyan függvényt, amely egyéni kódot ad ehhez a címkéhez. A kimenetben az egyedi ablaktáblánk az "AngularJS" szöveget téglalapban, fekete fekete szegéllyel jeleníti meg.
- A "transzclude" attribútumot igazként kell megemlíteni, amire a szöglet szerint szükség van ahhoz, hogy ezt a címkét a DOM-ba injektálja.
- A hatókörben meghatározunk egy cím attribútumot. Az attribútumokat általában név / érték párokként határozzák meg, például: név = "érték". Esetünkben az ablaktábla HTML-címkénkben szereplő attribútum neve "title". A "@" szimbólum a szögletes követelmény. Ez úgy történik, hogy amikor a (z) = {{title}} sor végrehajtása megtörténik az 5. lépésben, a title attribútum egyéni kódja hozzáadódik az ablaktábla HTML-címkéjéhez.
- A cím attribútumok egyéni kódja, amely csak egy szilárd fekete keretet rajzol az irányításunkhoz.
- Végül meghívjuk az egyéni HTML címkénket a definiált title attribútummal együtt.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
- A kimenet világosan mutatja, hogy a html5 ablaktábla címattribútumát az "Angular.JS" egyéni értékére állították be.
Beágyazott irányelvek
A szögletes irányelvek beágyazhatók. Csakúgy, mint bármely programozási nyelv belső moduljai vagy funkciói, előfordulhat, hogy direktívákat kell egymásba ágyaznia.
Ezt az alábbi példával jobban megismerheti.
Ebben a példában két „külső” és „belső” irányelvet hozunk létre.
- A belső irányelv a "Belső" nevű szöveget jeleníti meg.
- Míg a külső irányelv valóban felhívja a belső irányelvet, hogy jelenítse meg a "Belső" nevű szöveget.
Guru99 Global Event