CUSTOM Direktivy v AngularJS: Jak vytvořit? [Příklady]

Co je celní směrnice?

A Celní směrnice v AngularJS je uživatelsky definovaná směrnice, která uživatelům umožňuje používat požadované funkce k rozšíření funkčnosti HTML. Lze jej definovat pomocí funkce „směrnice“ a nahrazuje prvek, pro který se používá. I když má AngularJS mnoho výkonných direktiv, někdy jsou vyžadovány vlastní direktivy.

Jak vytvořit vlastní směrnici?

Podívejme se na příklad, jak můžeme vytvořit vlastní direktivu AngularJS.

Vlastní direktiva v našem případě jednoduše vloží značku div, která má na naši stránku text „AngularJS Tutorial“, když je direktiva volána.

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

Vysvětlení kódu

Nejprve vytváříme a 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í direktivu s názvem „ngGuru“ a definujeme funkci, která bude mít vlastní kód pro naši direktivu.Poznámka: - Všimněte si, že při definování směrnice jsme ji definovali jako ngGuru s velkým písmenem 'G'. A když k němu přistupujeme z našeho tagu div jako direktivu, přistupujeme k němu jako ng-guru. Takto angular chápe vlastní direktivy definované v aplikaci. Nejprve by měl název vlastní směrnice začínat písmeny 'ng'. Za druhé, symbol pomlčky '-' by měl být uveden pouze při volání směrnice. A za třetí, první písmeno následující za písmeny 'ng' při definování směrnice může být malé nebo velké.
Používáme parametr šablony, což je parametr definovaný Angular pro vlastní direktivy. V tomto definujeme, že kdykoli je použita tato směrnice, pak stačí použít hodnotu šablony a vložit ji do volajícího kódu.
Zde nyní využíváme naši vlastní direktivu „ng-guru“. Když to uděláme, hodnota, kterou jsme definovali pro naši šablonu „ Výukový program Angular JS ” se nyní vstříkne sem.

Pokud je kód úspěšně spuštěn, 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í direktiva ng-guru, která má definovanou šablonu pro zobrazení vlastního textu.

Směrnice a rozsahy AngularJs

Rozsah je definován jako lepidlo, které spojuje řadič s pohledem 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 je pro vlastní direktivu snadné využívat data předávaná hlavnímu kontroléru.

Podívejme se na příklad vlastní direktivy AngularJS, jak můžeme použít rozsah nadřazeného řadiče v naší vlastní direktivě.

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

Vysvětlení kódu

Nejprve vytvoříme ovladač s názvem „DemoController“. V tomto definujeme proměnnou s názvem tutorialName a připojíme ji k objektu scope jedním příkazem – $scope.tutorialName = “AngularJS”.
V naší vlastní direktivě můžeme volat proměnnou „tutorialName“ pomocí výrazu. Tato proměnná by byla přístupná, protože je definována v ovladači „DemoController“, který by se stal rodičem této direktivy.
Na ovladač odkazujeme v tagu div, který bude fungovat jako náš nadřazený tag div. Všimněte si, že toto je třeba provést jako první, aby naše vlastní direktiva měla přístup k proměnné tutorialName.
Nakonec jen připojíme naši vlastní direktivu „ng-guru“ k naší značce div.

Pokud je kód úspěšně spuštěn, 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í direktiva „ng-guru“ využívá proměnnou rozsahu tutorialName v nadřazeném řadiči.

Použití ovladačů s direktivami

Angular poskytuje zařízení k přístup k členské proměnné kontroleru přímo z vlastních direktiv bez potřeby objektu rozsahu.

To se občas stává nezbytným, protože v aplikaci můžete mít více objektů rozsahu patřících více řadičům.

Existuje tedy vysoká pravděpodobnost, že byste mohli udělat chybu a přistupovat k objektu rozsahu nesprávného ovladače.

V takovém scénáři existuje způsob, jak konkrétně zmínit větu „Chci získat přístup k tomuto konkrétnímu ovladači“ z mé směrnice.

Podívejme se na příklad, jak toho můžeme dosáhnout.

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

Vysvětlení kódu

Nejprve vytvoříme ovladač s názvem „DemoController“. V tomto nadefinujeme proměnnou nazvanou „tutorialName“ a tentokrát ji místo připojení k objektu scope připojíme přímo k ovladači.
V naší vlastní direktivě konkrétně zmiňujeme, že chceme použít ovladač „DemoController“ pomocí klíčového slova controller parameter.
Referenci na regulátor vytvoříme pomocí parametru „controllerAs“. Toto je definováno pomocí Angular a je to způsob, jak odkazovat na ovladač jako referenční.

Poznámka: -Je možné přistupovat k více řadičům v direktivě zadáním příslušných bloků řadiče, controllerA a šablonových příkazů.

Nakonec v naší šabloně používáme referenci vytvořenou v kroku 3 a používáme členskou proměnnou, která byla připojena přímo k ovladači v kroku 1.

Pokud je kód úspěšně spuštěn, 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 přistupuje zejména k DemoControlleru a k ní připojené členské proměnné tutorialName a zobrazuje text „Angular“.

Jak vytvořit opakovaně použitelné direktivy

Již jsme viděli sílu vlastních direktiv, ale můžeme je posunout na další úroveň vytvořením vlastních znovu použitelných direktiv.

Ř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 znovu použili na více obrazovkách bez nutnosti pokaždé kódovat, vytvoříme hlavní ovládací prvek nebo direktivu v úhlovém provedení, která tyto ovládací prvky podrží („Jméno“ a „věk“ uživatele).

Takže nyní, místo abychom pokaždé zadávali stejný kód pro níže uvedenou obrazovku, můžeme tento kód ve skutečnosti vložit do směrnice a vložit tuto směrnici kdykoli.

Podívejme se na příklad, jak toho můžeme dosáhnout.

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

Vysvětlení kódu

V našem fragmentu kódu pro vlastní direktivu se mění pouze hodnota, která je dána parametru šablony naší vlastní direktivy. Namísto značky nebo textu plánu pět ve skutečnosti zadáváme celý fragment 2 vstupních ovládacích prvků pro „ Jméno“ a „věk“, které musí být uvedeny na naší stránce.

Pokud je kód úspěšně spuštěn, 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í direktivy.

Direktivy a komponenty AngularJS – ng-transclude

Jak jsme již zmínili dříve, Angular je určen k rozšíření funkčnosti HTML. A už jsme viděli, jak můžeme vložit kód pomocí vlastních znovu použitelných direktiv.

Ale v moderním vývoji webových aplikací existuje také koncept vývoje webových komponent. Což v podstatě znamená vytváření vlastních HTML značek, které lze použít jako komponenty v našem kódu.

Angular tedy poskytuje další úroveň výkonu pro rozšiřování HTML tagů tím, že dává možnost vkládat atributy do samotných HTML tagů.

To se provádí pomocí „ng-transclude” tag, což je druh nastavení, kterým se angularu řekne, aby zachytil vše, co je vloženo do direktivy v označení.

Vezměme si příklad, jak toho můžeme dosáhnout.

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

Vysvětlení kódu

Direktivu používáme k definování vlastní značky HTML s názvem 'pane' a přidávání funkce, která do této značky vloží vlastní kód. Ve výstupu naše vlastní značka panelu zobrazí text „AngularJS“ v obdélníku s plným černým okrajem.
Atribut „transclude“ musí být uveden jako true, což vyžaduje angular pro vložení tohoto tagu do našeho DOM.
V rozsahu definujeme atribut title. Atributy jsou normálně definovány jako dvojice název/hodnota, jako je: name=”hodnota”. V našem případě je název atributu v našem podokně HTML tagu „title“. Symbol „@“ je požadavek z úhlu. To se provádí tak, že když je v kroku 5 proveden řádek title={{title}}, do značky HTML podokna se přidá vlastní kód pro atribut title.
Vlastní kód pro atributy názvu, který pouze kreslí plný černý okraj pro naši kontrolu.
Nakonec voláme naši vlastní HTML značku spolu s atributem title, který byl definován.

Pokud je kód úspěšně spuštěn, 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 tagu html5 panelu byl nastaven na vlastní hodnotu „Angular.JS“.

Vnořené směrnice

Direktivy v AngularJS lze vnořovat. Stejně jako vnitřní moduly nebo funkce v jakémkoli programovací jazyk, možná budete muset vložit direktivy do sebe.

Tomu můžete lépe porozumět, když se podíváte na níže uvedený příklad.

V tomto příkladu vytváříme 2 direktivy nazvané „vnější“ a „vnitřní“.

Vnitřní direktiva zobrazuje text nazvaný „Inner“.
Zatímco vnější direktiva ve skutečnosti volá vnitřní direktivu, aby zobrazila text s názvem „Inner“.

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

Vysvětlení kódu

Vytváříme směrnici nazvanou „vnější“, která se bude chovat jako naše nadřazená směrnice. Tato směrnice pak vyvolá „vnitřní“ směrnici.
Omezení:'E' vyžaduje angular, aby se zajistilo, že data z vnitřní směrnice jsou k dispozici vnější direktivě. Písmeno „E“ je zkrácenou formou slova „Element“.
Zde vytváříme vnitřní direktivu, která zobrazuje text „Inner“ v tagu div.
V šabloně pro vnější direktivu (krok č. 4) voláme vnitřní direktivu. Takže zde vkládáme šablonu z vnitřní směrnice do vnější směrnice.
Konečně přímo voláme vnější směrnici.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu,

Je vidět, že byly volány vnější i vnitřní direktivy a je zobrazen text v obou značkách div.

Zpracování událostí ve směrnici

Události taková klepnutí myší nebo klepnutí na tlačítka lze ovládat přímo ze samotných direktiv. To se provádí pomocí funkce odkazu. Funkce odkazu umožňuje direktivě připojit se k prvkům DOM na stránce HTML.

Syntaxe:

Syntaxe prvku odkazu je uvedena níže

ng-opakovat

link: function ($scope, element, attrs)

Funkce odkazu normálně přijímá 3 parametry včetně rozsahu, prvku, ke kterému je direktiva přidružena, a atributů cílového prvku.

Podívejme se na příklad, jak toho můžeme dosáhnout.

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

Vysvětlení kódu

Používáme funkci link, jak je definována v angular, abychom umožnili direktivám přistupovat k událostem v HTML DOM.
Klíčové slovo 'element' používáme, protože chceme reagovat na událost pro prvek HTML DOM, což je v našem případě prvek "div". Poté používáme funkci „bind“ a říkáme, že chceme přidat vlastní funkcionalitu do události kliknutí prvku. Slovo 'kliknutí' je klíčové slovo, které se používá k označení události kliknutí jakéhokoli ovládacího prvku HTML. Ovládací prvek tlačítka HTML má například událost click. Protože v našem příkladu chceme přidat vlastní kód do události kliknutí naší značky „dev“, použijeme klíčové slovo „click“.
Zde říkáme, že chceme nahradit vnitřní HTML prvku (v našem případě prvku div) textem 'Klikli jste na mě!'.
Zde definujeme naši značku div pro použití vlastní direktivy ng-guru.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Zpočátku se uživateli zobrazí text 'Click Me', protože to je to, co bylo původně definováno v tagu div. Když skutečně kliknete na značku div, zobrazí se níže uvedený výstup

Shrnutí

Lze také vytvořit vlastní direktivu, kterou lze použít k vložení kódu do hlavní úhlové aplikace.
Pomocí klíčových slov 'Controller', 'controllerAs' a 'template' lze vytvořit vlastní direktivy pro volání členů definovaných v objektu oboru v určitém řadiči.
Direktivy mohou být také vnořené, aby poskytovaly vestavěné funkce, které mohou být vyžadovány v závislosti na potřebě aplikace.
Direktivy mohou být také znovu použitelné, takže je lze použít k vložení společného kódu, který by mohl být vyžadován v různých webových aplikacích.
Direktivy lze také použít k vytvoření vlastních HTML značek, které by měly vlastní funkcionalitu definovanou podle obchodních požadavků.
Události lze také zpracovávat z direktiv pro zpracování událostí DOM, jako jsou kliknutí na tlačítka a myši.

Máš rád:

Co je celní směrnice?

Jak vytvořit vlastní směrnici?

Vysvětlení kódu

Směrnice a rozsahy AngularJs

Vysvětlení kódu

SOUVISEJÍCÍ ČLÁNKY

Použití ovladačů s direktivami

Vysvětlení kódu

Jak vytvořit opakovaně použitelné direktivy

Vysvětlení kódu

Direktivy a komponenty AngularJS – ng-transclude

Vysvětlení kódu

Vnořené směrnice

Vysvětlení kódu

Zpracování událostí ve směrnici

Vysvětlení kódu

Shrnutí