Hogyan hozható létre CUSTOM irányelv AngularJS-ben példával

Tartalomjegyzék:

Anonim

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:

  1. 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.
  2. 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.

  1. 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.
  2. 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:

  1. 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".
  2. 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.
  3. 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.
  4. 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:

  1. 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.
  2. 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.
  3. 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.

  4. 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:

  1. 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:

  1. 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.
  2. 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.
  3. 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.
  4. A cím attribútumok egyéni kódja, amely csak egy szilárd fekete keretet rajzol az irányításunkhoz.
  5. 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

Kód Magyarázat:

  1. Létrehozunk egy "külső" nevű irányelvet, amely a szülői irányelvünkként fog viselkedni. Ez az irányelv felhívja a "belső" irányelvet.
  2. Az „E” korlátozás szöget igényel annak biztosítására, hogy a belső irányelv adatai elérhetőek legyenek a külső irányelv számára. Az „E” betű az „Element” szó rövid alakja.
  3. Itt hozzuk létre azt a belső irányelvet, amely az "Inner" szöveget megjeleníti egy div tagben.
  4. A külső irányelv sablonjában (4. lépés) a belső irányelvnek nevezzük. Tehát itt injektáljuk a sablont a belső irányelvből a külső irányelvbe.
  5. Végül közvetlenül felhívjuk a külső irányelvet.

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 kimenetből

  • Látható, hogy mind a külső, mind a belső irányelveket meghívták, és mindkét div tagben megjelenik a szöveg.

Az események kezelése irányelvben

Az ilyen egérkattintások vagy gombkattintások az irányelveken belül kezelhetők. Ez a link funkció segítségével történik. A link funkció lehetővé teszi az irányelv számára, hogy csatolja magát a HTML-oldal DOM-elemeihez.

Szintaxis:

A link elem szintaxisa az alábbiakban 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 az irányelv társul, és a cél elem attribútumait.

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

Event Registration

Guru99 Global Event

Click Me

Kód Magyarázat:

  1. A link függvényt szög szerint definiáljuk, hogy az irányelvek képesek legyenek hozzáférni a HTML DOM eseményeihez.
  2. Az 'element' kulcsszót használjuk, mert egy HTML DOM elem eseményére szeretnénk válaszolni, amely esetünkben a „div" elem lesz. Ezután a "kötés" függvényt használjuk, és azt mondjuk, hogy egyedi funkciókat szeretnénk hozzáadni az elem kattintási eseményéhez. A "click" 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ő rendelkezik a kattintási eseményvel. Mivel példánkban egy egyedi kódot akarunk hozzáadni a "dev" címkénk kattintási eseményéhez, a "click" kulcsszót használjuk.
  3. Itt azt mondjuk, hogy az elem belső HTML-jét (esetünkben a div elemet) a „Te kattintottál rám!” Szöveggel akarjuk helyettesíteni.
  4. Itt definiáljuk a div tagünket az ng-guru egyedi irányelv használatára.

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:

  • Kezdetben a „Click Me” szöveg jelenik meg a felhasználó számára, mert ezt az eredetileg definiálták a div tagben. Amikor valóban a div címkére kattint, az alábbi kimenet jelenik meg

Összegzés

  • Létrehozhat egy egyedi irányelvet is, amely felhasználható kód beinjekciózására a fő szögletes alkalmazásban.
  • Egyéni irányelvek létrehozhatók a hatókörobjektumban meghatározott tagok hívására egy bizonyos vezérlőben a „Controller”, „controllerAs” és „template” kulcsszavak használatával.
  • Az irányelvek beágyazhatók olyan beágyazott funkciók biztosítására is, amelyekre az alkalmazás szükségességétől függően szükség lehet.
  • Az irányelveket újrafelhasználhatóvá is lehet tenni, hogy felhasználhatók legyenek olyan közös kódok beadására, amelyekre szükség lehet a különböző webalkalmazásokban.
  • Az irányelvek felhasználhatók olyan egyedi HTML-címkék létrehozására is, amelyeknek az üzleti követelményeknek megfelelő saját funkcionalitásuk lenne.
  • Az események az irányelveken belül is kezelhetők a DOM események, például a gomb és az egér kattintásainak kezelésére.