Co je to vlastní směrnice?
Vlastní směrnice v Angular Js je uživatelem definovaná směrnice s požadovanou funkcí. I když má AngularJS již po vybalení spoustu výkonných směrnic, někdy jsou vyžadovány vlastní směrnice.
V tomto výukovém programu se naučíte
- Jak vytvořit vlastní směrnici?
- Směrnice a obory AngularJs
- Používání řadičů se směrnicemi
- Jak vytvořit opakovaně použitelné směrnice
- Směrnice a komponenty AngularJS - ng-transclude
- Vnořené směrnice
- Zpracování událostí ve směrnici
Jak vytvořit vlastní směrnici?
Pojďme se podívat na příklad, jak můžeme vytvořit vlastní direktivu.
Vlastní směrnice v našem případě jednoduše vloží značku div, která má na naší stránce při volání směrnice text „AngularJS Tutorial“.
Event Registration Guru99 Global Event
Vysvětlení kódu:
- Nejprve vytváříme modul pro naši úhlovou aplikaci. To je nutné k vytvoření vlastní směrnice, protože směrnice bude vytvořena pomocí tohoto modulu.
- Nyní vytváříme vlastní směrnici nazvanou „ngGuru“ a definujeme funkci, která bude mít vlastní kód pro naši směrnici.
Poznámka:-
Všimněte si, že při definování směrnice jsme ji definovali jako ngGuru s písmenem „G“ jako velkým písmem. A když k němu přistupujeme z naší značky div jako směrnice, přistupujeme k ní jako ng-guru. Takto Angular rozumí vlastním direktivám definovaným v aplikaci. Název vlastní směrnice by měl nejprve začínat písmeny „ng“. Zadruhé by měl být pomlčka „-“ zmíněna pouze při volání směrnice. A za třetí, první písmeno, které následuje po definici směrnice za písmeny „ng“, může být malé nebo velké.
- Používáme parametr šablony, což je parametr definovaný Angular pro vlastní směrnice. V tomto definujeme, že kdykoli se použije tato směrnice, stačí použít hodnotu šablony a vložit ji do volajícího kódu.
- Zde nyní využíváme naši vlastní vytvořenou směrnici „ng-guru“. Když to uděláme, nyní zde bude vložena hodnota, kterou jsme definovali pro naši šablonu „Angular JS Tutorial“.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
- Výše uvedený výstup jasně ukazuje, že se v prohlížeči zobrazí naše vlastní směrnice ng-guru, která má definovanou šablonu pro zobrazování vlastního textu.
Směrnice a obory AngularJs
Rozsah je definován jako lepidlo, které váže řadič na pohled správou dat mezi pohledem a řadičem.
Při vytváření vlastních direktiv AngularJs budou mít ve výchozím nastavení přístup k objektu oboru v nadřazeném řadiči.
Tímto způsobem bude pro vlastní direktivu snadné využívat data předávaná hlavnímu řadiči.
Podívejme se na příklad toho, jak můžeme použít rozsah nadřazeného řadiče v naší vlastní směrnici.
Event Registration Guru99 Global Event
Vysvětlení kódu:
- Nejprve vytvoříme ovladač s názvem „DemoController“. V tomto definujeme proměnnou nazvanou tutorialName a připojíme ji k objektu oboru v jednom příkazu - $ scope.tutorialName = "AngularJS".
- V naší vlastní směrnici můžeme zavolat proměnnou „tutorialName“ pomocí výrazu. Tato proměnná by byla přístupná, protože je definována v řadiči „DemoController“, který by se stal nadřazeným prvkem této směrnice.
- Na ovladač odkazujeme ve značce div, která bude fungovat jako naše nadřazená značka div. Všimněte si, že to je třeba udělat jako první, aby naše vlastní direktiva získala přístup k proměnné tutorialName.
- Nakonec k naší značce div připojíme naši vlastní směrnici „ng-guru“.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
- Výše uvedený výstup jasně ukazuje, že naše vlastní směrnice „ng-guru“ využívá v nadřazeném řadiči proměnnou oboru tutorialName.
Používání řadičů se směrnicemi
Úhlové poskytuje zařízení pro přístup k členské proměnné řadiče přímo z vlastních směrnic bez nutnosti objektu oboru.
To je občas nutné, protože v aplikaci můžete mít více objektů oboru patřících do více řadičů.
Existuje tedy velká šance, že byste mohli udělat chybu v přístupu k objektu oboru nesprávného řadiče.
V takových scénářích existuje způsob, jak konkrétně zmínit, že ze své směrnice řeknu „Chci získat přístup k tomuto konkrétnímu řadiči“.
Pojďme se podívat na příklad toho, jak toho můžeme dosáhnout.
Event Registration Guru99 Global Event
Vysvětlení kódu:
- Nejprve vytvoříme ovladač s názvem „DemoController“. V tomto definujeme proměnnou nazvanou "tutorialName" a tentokrát ji místo připojení k objektu oboru připojíme přímo k řadiči.
- V naší vlastní směrnici konkrétně zmiňujeme, že chceme použít řadič „DemoController“ pomocí klíčového slova parametru řadiče.
- Pomocí parametru "controllerAs" vytvoříme odkaz na řadič. To je definováno Angular a je to způsob, jak odkazovat na ovladač jako referenci.
Poznámka: - Ve směrnici je možné přistupovat k více řadičům zadáním příslušných bloků příkazů controller, controllerAs a template.
- Nakonec v naší šabloně používáme odkaz vytvořený v kroku 3 a používáme členskou proměnnou, která byla připojena přímo k řadiči v kroku 1.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Výstup jasně ukazuje, že vlastní direktiva zejména přistupuje k DemoController a členské proměnné tutorialName k ní připojené a zobrazuje text "Angular".
Jak vytvořit opakovaně použitelné směrnice
Už jsme viděli sílu vlastních směrnic, ale můžeme ji posunout na další úroveň vytvořením vlastních opakovaně použitelných směrnic.
Řekněme například, že jsme chtěli vložit kód, který by vždy zobrazoval níže uvedené značky HTML na více obrazovkách, což je v podstatě jen vstup pro „Jméno“ a „věk“ uživatele.
Abychom tuto funkci mohli opakovaně použít na více obrazovkách bez nutnosti zakódování, vytvoříme hlavní ovládací prvek nebo direktivu v úhlu, která tyto ovládací prvky drží („Jméno“ a „věk“ uživatele).
Takže nyní, místo toho, abychom pokaždé zadávali stejný kód pro obrazovku níže, můžeme tento kód skutečně vložit do směrnice a vložit tuto směrnici kdykoli.
Podívejme se na příklad toho, jak toho můžeme dosáhnout.
Event Registration Guru99 Global Event
Vysvětlení kódu:
- V našem fragmentu kódu pro vlastní direktivu se změní jen hodnota, která je dána parametru šablony naší vlastní direktivy.
Místo značky nebo textu plánu pět vlastně zadáváme celý fragment 2 vstupních ovládacích prvků pro „Název“ a „věk“, které je třeba zobrazit na naší stránce.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výše uvedeného výstupu vidíme, že se na stránku přidá fragment kódu ze šablony vlastní směrnice.
Směrnice a komponenty AngularJS - ng-transclude
Jak jsme již zmínili dříve, Angular má rozšířit funkčnost HTML. A už jsme viděli, jak můžeme mít vkládání kódu pomocí vlastních opakovaně použitelných směrnic.
Ale v moderním vývoji webových aplikací existuje také koncept vývoje webových komponent. Což v podstatě znamená vytvoření vlastních značek HTML, které lze v našem kódu použít jako komponenty.
Angular proto poskytuje další úroveň výkonu při rozšiřování značek HTML tím, že umožňuje vkládat atributy do samotných značek HTML.
To se děje pomocí značky „ ng-transclude “, což je druh nastavení, které umožňuje úhlovému zachycení všeho, co je vloženo do směrnice ve značce.
Vezměme si příklad toho, jak toho můžeme dosáhnout.
Event Registration Guru99 Global Event
Angular JS
Vysvětlení kódu:
- Používáme direktivu k definování vlastní značky HTML s názvem 'pane' a přidání funkce, která vloží nějaký vlastní kód pro tuto značku. Na výstupu bude naše značka vlastního podokna zobrazovat text "AngularJS" v obdélníku s plným černým okrajem.
- Atribut „transclude“ musí být zmíněn jako true, což vyžaduje angular pro vložení této značky do našeho DOM.
- V oboru definujeme atribut titulu. Atributy jsou obvykle definovány jako páry název / hodnota, například: name = "value". V našem případě je název atributu v naší značce HTML značky „title“. Symbol „@“ je požadavek z úhlu. To se děje tak, že když je v kroku 5 spuštěn řádek title = {{title}}, bude do značky HTML panelu přidán vlastní kód pro atribut title.
- Vlastní kód pro atributy titulu, který právě vykresluje plné černé ohraničení pro naši kontrolu.
- Nakonec voláme naši vlastní značku HTML spolu s atributem title, který byl definován.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
- Výstup jasně ukazuje, že atribut title značky html5 v podokně byl nastaven na vlastní hodnotu „Angular.JS“.
Vnořené směrnice
Směrnice v úhlu mohou být vnořeny. Stejně jako jen vnitřní moduly nebo funkce v libovolném programovacím jazyce budete možná muset vložit směrnice do sebe navzájem.
Můžete to lépe pochopit zobrazením níže uvedeného příkladu.
V tomto příkladu vytváříme 2 směrnice zvané „vnější“ a „vnitřní“.
- Vnitřní směrnice zobrazí text s názvem „Vnitřní“.
- Zatímco vnější směrnice ve skutečnosti volá vnitřní směrnici, aby se zobrazil text s názvem „Vnitřní“.
Guru99 Global Event