AngularJS egyéni direktíva: Sablonok, hatókör és átfedés
James Hartman
⚡ Okos összefoglaló
Az AngularJS egyéni direktívái a HTML-t olyan újrafelhasználható viselkedéssel bővítik, amelyet Ön határoz meg. Egy direktívagyár egy definíciós objektumot ad vissza, és az AngularJS ezt a viselkedést csatolja a megfelelő elemhez, attribútumhoz, osztályhoz vagy megjegyzéshez a jelölőnyelvben.
Mi az a Custom Directive az AngularJS-ben?
A Egyéni irányelv az AngularJS-ben egy felhasználó által definiált direktíva, amely a HTML-t a felhasználó által írt viselkedéssel bővíti. Egy modul a „direktive” függvény használatával, és az AngularJS hozzáfűzi azt az oldal minden olyan pontjához, ahol a megfelelő elem vagy attribútum megjelenik. Annak ellenére, hogy az AngularJS sok hatékony beépített direktívák a dobozból kivéve, például ng-ismétlés, néha egyéni utasításokra van szükség.
⚠️ Javítás: Az eredeti szerint egy egyéni direktíva „lecseréli azt az elemet, amelyhez használják”. Alapértelmezés szerint nem: template beillesztésre kerül belső az illeszkedő elem. Csere szükséges replace: true, elavult az AngularJS 1.3 óta.
⚠️ Támogatási közlemény: AngularJS elérve élettartam vége 2021. december 31-én és nem kap további javításokat vagy biztonsági javításokat. Az alábbiakban leírtak továbbra is pontosak maradnak a meglévő AngularJS 1.x kód fenntartása érdekében; a modern Angularban a megfelelőik a komponensek és az attribútumdirektívák.
Az egyéni direktívák használatának oka az ismétlődés. Amikor ugyanaz a jelölés vagy DOM-kapcsolat több képernyőn is megjelenik, egy direktíva egyetlen elnevezett címkévé alakítja azt.
Hogyan készítsünk egyedi irányelvet?
Nézzünk egy példát arra, hogyan hozhatunk létre egy AngularJS egyéni direktívát.
A mi esetünkben az egyéni direktíva egyszerűen egy div taget fog beilleszteni az oldalunkba, amelynek szövege az „Angular JS Tutorial” lesz, amikor a direktívát meghívjuk.
Az alábbi, jegyzetekkel ellátott képernyőképen számozással látható a lista négy, utána elmagyarázott része.
<!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>
⚠️ Figyelem – a listában megőrzött hibák: A kód pontosan úgy kerül reprodukálásra, ahogyan közzétették. Három hiba ismétlődik minden itt felsorolt listában: chrset="UTF 8" kell lennie charset="UTF-8"; angular.js és a angular.min.js mindkettő betöltődik, tehát az AngularJS kétszer töltődik be; és angular-route.js betöltődik, mielőtt az a fájl betöltődik, amelytől függ.
Code Magyarázat
- Először létrehozunk a modul az AngularJS alkalmazásunkhoz. Erre szükség van egy egyéni direktíva létrehozásához, mivel az direktíva ezzel a modullal lesz létrehozva.
- Most létrehozunk egy „ng” nevű egyéni direktívát.Guru” és egy gyári függvény definiálása, amely az irányelvünkhöz tartozó egyéni kódot fogja tárolni.
- A template paramétert használjuk, ami egy AngularJS által definiált paraméter egyéni direktívákhoz. Ebben azt definiáljuk, hogy amikor ezt az direktívát használjuk, akkor csak a template értékét használjuk, és illesszük be a hívó kódba.
- Itt most az általunk létrehozott „ng-guru” direktívát használjuk. Amikor ezt tesszük, a sablonunkhoz definiált érték,
<div>Angular JS Tutorial</div>, most ide lesz befecskendezve.
Irányelv elnevezése és normalizálása
A névbeli eltérés a következők között: JavaA szkriptek és a HTML összezavarják a legtöbb kezdőt. AngularJS normalizálódik minden elem és attribútumnév egyezése előtt: eltávolítja azokat x- or data- előtagot, majd egy által határolt nevet konvertál -, : or _ a camelCase-be. Ezért ngGuru gyufa ng-guru, és miért data-ng-guru is működik. A camelCase forma a valódi neve; a kebab-case egyszerűen így van leírva HTML-ben.
⚠️ Javítás: Az eredeti szöveg szerint az egyéni direktíva nevének „az 'ng' betűkkel kell kezdődnie”. hivatalos AngularJS dokumentáció az ellenkezőjét tanácsolja: soha ne illessze be a saját utasításai elé ng, különben ütközhetnek egy jövőbeli beépített elemmel. Használjon saját előtagot, például g99Guru írva, mint g99-guru.
Ha a kód sikeresen végrehajtódik, ez a kimenet jelenik meg.
output:
A kimenet egyértelműen mutatja, hogy az egyéni ng-guru direktívánk, amelyhez az egyéni szöveg megjelenítésére szolgáló sablon van definiálva, megjelenik a böngészőben. A következő lépés, hogy valami újrafelhasználásra érdemes elemet tegyünk a sablonba.
Hogyan hozzunk létre újrafelhaszná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 szeretnénk beilleszteni, amely mindig, több képernyőn is megjeleníti az alábbi HTML-címkéket, ami alapvetően csak a felhasználó „nevének” és „életkorának” a bemenete.
Ahhoz, hogy ezt a részletet több képernyőn is újra felhasználhassuk anélkül, hogy minden alkalommal kódolnánk, létrehozunk egy master vezérlőt, vagy direktívát az AngularJS-ben, amely ezt a két vezérlőt tartalmazza.
Tehát ahelyett, hogy minden képernyőn megismételnénk ezt a jelölést, beágyazzuk egy direktívába, és ehelyett meghívjuk az direktívát. Az alábbi képernyőkép az egyetlen sort jelöli, amely megváltozik.
<!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: ' Name <input type="text"><br><br> Age<input type="text">' }; }); </script> </body> </html>
Code Magyarázat
- Az egyéni direktívához tartozó kódrészletünkben csak a sablonparaméternek adott érték változik. Egy sima címke vagy egy sornyi szöveg helyett a „Név” és a „Kor” két bemeneti vezérlőelemének teljes részletét adjuk meg, amelyeket az oldalunkon meg kell jeleníteni.
👍 Tipp: Egy ilyen hosszú sablonnak külön fájlban a helye. Csere template mert templateUrl: 'name-age.html'.
Ha a kód sikeresen végrehajtódik, ez a kimenet jelenik meg.
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. A sablon továbbra is statikus, így a következő lépés az adatok betáplálása.
AngularJS direktívák és hatókörök
Az hatálya úgy definiálható, mint egy ragasztó, amely a vezérlőt a nézethez köti azáltal, hogy kezeli az adatokat a nézet és a vezérlő között.
Egyéni AngularJS direktívák létrehozásakor alapértelmezés szerint hozzáférésük lesz a szülővezérlőben található scope objektumhoz. Ez ugyanaz a scope objektum, nem egy másolat.
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 példát arra, hogyan használhatjuk egy szülő vezérlő hatókörét az egyéni direktívánkban. Az alábbi képernyőképen számozva látható a négy lépés.
<!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 Magyarázat
- Először létrehozunk egy „DemoController” nevű vezérlőt. Ebben definiálunk egy tutorialName nevű változót, és egyetlen utasítással csatoljuk a scope objektumhoz:
$scope.tutorialName = "Angular JS". - 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 végrehajtódik, ez a kimenet jelenik meg.
output:
A fenti kimenet egyértelműen mutatja, hogy az „ng-guru” egyéni direktívánk a szülővezérlő tutorialName hatókör-változóját használja. A szülő hatókör megosztása kényelmes, de nem mindig az, amire szükségünk van.
Vezérlők használata direktívákkal
Az AngularJS lehetőséget ad arra, hogy 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 azért válik szükségessé, mert egy alkalmazásnak több hatókör-objektuma is lehet, amelyek több vezérlőhöz tartoznak, így nagy az esélye annak, hogy véletlenül a rossz vezérlő hatókör-objektumához férünk hozzá.
Ilyen esetben van egy mód arra, hogy kifejezetten azt mondjuk ki az irányelvből, hogy „Hozzá akarok férni ehhez a vezérlőhöz”.
Nézzünk egy példát arra, hogyan érhetjük el ezt. A képernyőképen számozva látható a négy lépés.
<!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 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 a scope objektum helyett 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 hozunk létre egy referenciát a vezérlőre. Ezt az AngularJS definiálja, és ez a módja annak, hogy egy alias segítségével hivatkozzunk a vezérlőre.
- Végül a sablonunkban a 3. lépésben létrehozott referenciát és az 1. lépésben közvetlenül a vezérlőhöz csatolt tagváltozót használjuk.
Jegyzet: Egy direktíván belül több vezérlő is elérhető a vezérlő, a controllerAs és a template utasítások megfelelő blokkjainak megadásával. Egy szülő direktíva vezérlőjét használd helyette require.
Ha a kód sikeresen végrehajtódik, ez a kimenet jelenik meg.
output:
A kimenet egyértelműen mutatja, hogy az egyéni direktíva a DemoControllerhez és a hozzá csatolt tutorialName tagváltozóhoz fér hozzá, és az „Angular” szöveget jeleníti meg. Mindkét megközelítés továbbra is egy megosztott hatókörből olvas, amit egy izolált hatókör megakadályoz.
Hogyan különböznek a @, =, & és < kötések egy izolált hatókörben?
Egy olyan direktíva, amely megosztja a szülő hatókörét, vezérlőnként csak egyszer használható, mivel két példány ugyanazon változókért versengene. scope objektum létrehoz egy elkülönített hatókör: az utasítás a felsorolt tulajdonságokon kívül semmi mást nem lát. Minden bejegyzés egy előtag szimbólumot használ, amely meghatározza, hogyan halad az értéke.
| Szimbólum | Irány | Kapott érték | Használja |
|---|---|---|---|
| @ | Egyirányú belépés | Az attribútum interpolált karakterláncként | Címkék, címek, bármilyen egyszerű szöveg |
| = | Kétirányú | Maga az élő objektum vagy érték | Modellek, amelyekre az irányelv visszaír |
| & | Kimenő hívás | Egy függvény, amely egy kifejezést értékel ki a külső hatókörben | Visszahívások, például lezáráskor vagy mentéskor |
| < | Egyirányú belépés | A kiértékelt érték, soha nem felfelé írva | Csak olvasható adatok, hozzáadva az AngularJS 1.5-ben |
👍 Tipp: Elérni < előtt =Az egyirányú kötés olcsóbban figyelhető, és megakadályozza, hogy egy komponens csendben mutálja a hívó adatait. A következő szakasz a következőt használja: @.
AngularJS direktívák és komponensek: ng-transclude
Ahogy korábban említettük, az AngularJS célja a funkcionalitás kibővíté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 webes alkalmazásfejlesztésben létezik a fejlesztés fogalma is.ping webkomponensek, ami alapvetően azt jelenti, hogy saját HTML-címkéket hozunk létre, amelyeket komponensként használhatunk a kódunkban.
Ezért az AngularJS egy újabb szintű teljesítményt nyújt a HTML-címkék kiterjesztéséhez azáltal, hogy lehetővé teszi a hívó által a címkébe helyezett jelölőnyelv becsomagolását.
Ezt a „ng-transclude” direktíva, amely arra utasítja az AngularJS-t, hogy rögzítse a jelölésben az egyéni címkén belüli összes elemet, és ezen a ponton helyezze el a sablonban.
Vegyünk egy példát arra, hogyan érhetjük el ezt. A képernyőképen az alábbi öt pontot számoztuk meg.
<!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 Magyarázat
- A direktívát egy „pane” nevű egyéni HTML tag definiálására használjuk, amelynek kódját egy factory függvény biztosítja. A kimenetben a pane tag az „Angular JS” szöveget jeleníti meg egy téglalapban, tömör fekete szegéllyel.
- A „transclude” tulajdonságot igazra kell állítani, ami azt jelenti az AngularJS-nek, hogy tartsa meg az eredeti belső jelölést, és tegye elérhetővé a következők számára:
ng-transclude. - A scope objektumban egy cím kötést deklarálunk. Az attribútumokat általában név/érték párokként írjuk le, például:
name="value"Esetünkben a panelcímkén található attribútum a „title”, és a „@” szimbólum arra kéri az AngularJS-t, hogy ezt az attribútumot interpolált karakterláncként másolja át. - A sablon megrajzolja a vezérlőelemünk tömör fekete szegélyét, és megjelöli azt a helyet, ahová a transzlokált jelölés beszúrásra kerül.
- Végül meghívjuk az egyéni HTML-címkénket a definiált title attribútummal együtt.
⚠️ Javítás: Az eredeti szöveg a „@” jelet az „Angular követelményeként” írta le. Ez nem formalitás: @ a fenti táblázatban szereplő négy izolált hatókörű kötési szimbólum egyike, és mindig karakterláncot eredményez. Ez a sablon soha nem jelenít meg {{title}}, és egyetlen vezérlő sem határozza meg title, így csak a beillesztett szöveg látható.
Ha a kód sikeresen végrehajtódik, ez a kimenet jelenik meg.
output:
- A kimenet az egyéni panelelemet egy szegélyezett dobozként jeleníti meg, amely az átírt „Angular JS” szöveget tartalmazza.
Egy direktíva más direktívákat is tartalmazhat, amelyek a nagyobb komponensek összeszerelését írják le.
Beágyazott direktívák
Az AngularJS direktívái egymásba ágyazhatók. Mint bármely belső modulban vagy függvényben 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.
Az alábbi képernyőképen mindkét direktíva definíciója és az a pont látható, ahol az egyik meghívja a másikat.
</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>
⚠️ Figyelem – a hiba megmaradt ebben a listában: A közzétett lista ekkor kezdődik: </head>, hiányzik a nyitása <!DOCTYPE html>, <html> és a <head> sorokat. Add hozzá őket a futtatás előtt.
Code 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
restrict:'E'opció azt mondja az AngularJS-nek, hogy minden direktívához illeszkedjen elem név, ezért címkékként is írhatók<outer>és a<inner>Az „E” betű az „Element” szó rövidített alakja. - 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 meghívjuk a belső direktívát. Tehát itt a belső direktíva sablonját injektáljuk a külső direktívába.
- Végül pedig közvetlenül a külső irányelvre hivatkozunk.
⚠️ Javítás: Az eredeti szöveg állítólag restrict:'E' szükséges „annak biztosításához, hogy a belső direktívából származó adatok elérhetők legyenek a külső direktíva számára”. Nem tesz ilyet; csak szabályozza hogyan Egy direktíva írható. A beágyazás azért működik, mert a fordító folyamatosan abba a sablonba lép be, amit éppen beszúrt. Az adatok megosztásához használd a require és a controller.
Ha a kód sikeresen végrehajtódik, ez a kimenet jelenik meg.
output:
A kimenetből,
- Látható, hogy mind a külső, mind a belső direktíva meghívásra került, és mindkét div tagben található szöveg megjelenik.
A jelölés megjelenítése csak a direktíva működésének a fele; a másik fele a felhasználóra való reagálás.
Események kezelése egy direktívában
Események Az egérkattintások vagy a gombokra kattintások magukon a direktívákon belül is kezelhetők. Ez a link függvény segítségével történik. A link függvény teszi lehetővé az direktíva számára, hogy csatolja magát a HTML oldal DOM elemeihez.
Syntax:
A link függvény szintaxisa az alábbiak szerint alakul.
link: function ($scope, element, attrs)
A link függvény általában 3 paramétert fogad el: a hatókört, az elemet, amelyhez az irányelv tartozik, és a cél elem attribútumait. További kettő, egy kötelező vezérlő és egy transclude függvény, akkor érkezik, amikor ezek érvényesek.
Fordítási fázis vs. link fázis
Az AngularJS két menetben dolgozza fel az utasításokat, és ha tudod, melyik melyik, akkor a kódod hova tartozik.
- Összeállít egyszer fut le a template elemen, mielőtt bármilyen hatókör létrejönne. Illeszkedik a minden klón által megosztott strukturális szerkesztésekhez.
- Link példányonként egyszer fut le, a sablon klónozása és egy hatókör csatolása után. A DOM-figyelők és a hatókör-olvasások ide tartoznak.
Mivel a compile-nak nincs hatóköre, minden, ami adatot igényel, a linkhez tartozik, ezért definiálja az alábbi példa link egyedül.
Nézzünk egy példát arra, hogyan érhetjük ezt el. A képernyőképen az alábbi négy pont számozása látható.
<!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 Magyarázat
- Az AngularJS-ben definiált link függvényt használjuk, hogy a direktíva hozzáférhessen a HTML DOM eseményeihez.
- Az „element” kulcsszót azért használjuk, mert egy HTML DOM elem eseményére szeretnénk válaszolni, ami esetünkben a „div” elem. Ezután a „bind” függvényt használjuk egyéni funkciók hozzáadásához az elem click eseményéhez. A „click” szó az a kulcsszó, amely bármely HTML vezérlő click eseményét jelöli.
- Itt azt mondjuk, hogy az elem belső HTML-kódját, esetünkben a div elemet, a „Rám kattintottál” szöveggel szeretnénk helyettesíteni.
- Itt definiáljuk a div címkénket az ng-guru egyéni direktíva használatához.
👍 Tipp: Egy direktívának ki kell takarítania önmagát követően. Távolítson el minden olyan figyelőt, amely túléli a benne lévő elemet. element.on('$destroy', ...), vagy az oldal memóriaszivárgást okoz.
Ha a kód sikeresen végrehajtódik, ez a kimenet jelenik meg.
output:
- Kezdetben a „Kattints rám” szöveg jelenik meg a felhasználónak, mivel ezt definiálták a div címkében. Amikor a div címkére kattintasz, az alábbi kimenet jelenik meg.
A fenti példák mindegyike ugyanazon definíciós objektum egy vagy két tulajdonságát használta. A teljes halmazt érdemes megtartani.ping kézhez.
Irányelv Definíciója Objektum Tulajdonságok Referencia
Egy direktívagyár által visszaadott objektum a Irányelv Definíciós ObjektumMinden tulajdonság egy kérdésre ad választ az utasítás viselkedésével kapcsolatban.
| Ingatlanok | alapértelmezett | Mit csinál |
|---|---|---|
| korlátoz | 'EA' | Mely űrlapok illeszkednek: E elem, A attribútum, C osztály, M megjegyzés |
| sablon | egyik sem | Beágyazott jelölés beszúrva az egyező elembe |
| sablonUrl | egyik sem | Sablonfájl elérési útja, egyszer lekérve, majd gyorsítótárazva |
| hatálya | hamis | A „hamis” megosztja a szülő hatókörét, az „igaz” gyermeket hoz létre, az objektum pedig izolálódik. |
| ellenőr | egyik sem | A konstruktor, amely egy API-t tesz elérhetővé, más direktívákhoz is szükséges lehet |
| vezérlőAs | egyik sem | A sablonon belüli vezérlő aliasa |
| szükség | egyik sem | Egy másik direktíva vezérlője a befecskendezéshez; ^ szülőket keres, ^^ kihagyja önmagát, ? opcionális |
| link | egyik sem | Példányonkénti függvény: scope, element, attrs, controller, transcludeFn |
| összeállít | egyik sem | Egyszer fut le a sablonon, mielőtt bármilyen hatókör létrejönne |
| átszúrás | hamis | Megőrzi az eredeti belső jelölést az ng-transclude számára |
| prioritás | 0 | Fordítsd le a sorrendet egy megosztott elemen; a magasabb szintű elemek futnak először |
| terminál | hamis | Leállítja az alacsonyabb prioritású utasításokat az adott elemen |
| cserélni | hamis | Lecseréli az elemet a sablonra. Elavult az 1.3 verzió óta. |
👍 Tipp: Kezdj restrict, template és a link, hozzáad scope újrafelhasználásra, controller és a require direktíva-direktíva hívásokhoz, és hagyja priority és a terminal egyedül.
