Dyrektywy CUSTOM w AngularJS: jak tworzyć? [Przykłady]

Co to jest dyrektywa celna?

A Dyrektywa celna w AngularJS jest zdefiniowaną przez użytkownika dyrektywą, która umożliwia użytkownikom korzystanie z pożądanych funkcji w celu rozszerzenia funkcjonalności HTML. Można ją zdefiniować za pomocą funkcji „directive” i zastępuje ona element, dla którego jest używana. Mimo że AngularJS ma wiele potężnych dyrektyw od razu, czasami wymagane są niestandardowe dyrektywy.

Jak stworzyć dyrektywę niestandardową?

Przyjrzyjmy się przykładowi, jak możemy utworzyć niestandardową dyrektywę AngularJS.

W naszym przypadku niestandardowa dyrektywa po prostu wstrzyknie znacznik div z tekstem „AngularJS Tutorial” na naszej stronie, gdy dyrektywa zostanie wywołana.

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

Objaśnienie kodu

Najpierw tworzymy moduł dla naszego zastosowania kątowego. Jest to wymagane do utworzenia dyrektywy niestandardowej, ponieważ dyrektywa zostanie utworzona przy użyciu tego modułu.
Tworzymy teraz niestandardową dyrektywę o nazwie „ngGuru” i definiujemy funkcję, która będzie miała niestandardowy kod dla naszej dyrektywy.Uwaga: - Należy zauważyć, że podczas definiowania dyrektywy zdefiniowaliśmy ją jako ngGuru z literą „G” jako wielką. A gdy uzyskujemy do niej dostęp z naszego znacznika div jako dyrektywy, uzyskujemy do niej dostęp jako ng-guru. W ten sposób Angular rozumie niestandardowe dyrektywy zdefiniowane w aplikacji. Po pierwsze, nazwa niestandardowej dyrektywy powinna zaczynać się od liter „ng”. Po drugie, symbol myślnika „-” powinien być wymieniony tylko podczas wywoływania dyrektywy. I po trzecie, pierwsza litera po literach „ng” podczas definiowania dyrektywy może być mała lub wielka.
Używamy parametru szablonu, który jest parametrem zdefiniowanym przez Angular dla niestandardowych dyrektyw. W tym miejscu definiujemy, że za każdym razem, gdy używana jest ta dyrektywa, wystarczy użyć wartości szablonu i wstrzyknąć ją do kodu wywołującego.
Tutaj korzystamy teraz z naszej niestandardowej dyrektywy „ng-guru”. Kiedy to zrobimy, wartość, którą zdefiniowaliśmy dla naszego szablonu „ Samouczek Angulara JS ” zostanie teraz wstrzyknięty tutaj.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Powyższy wynik wyraźnie pokazuje, że nasza niestandardowa dyrektywa ng-guru, która ma zdefiniowany szablon służący do wyświetlania niestandardowego tekstu, jest wyświetlana w przeglądarce.

Dyrektywy i zakresy AngularJs

Zakres definiuje się jako spoiwo, które wiąże kontroler z widokiem poprzez zarządzanie danymi pomiędzy widokiem a kontrolerem.

Podczas tworzenia niestandardowych dyrektyw AngularJs domyślnie będą one miały dostęp do obiektu zakresu w kontrolerze nadrzędnym.

W ten sposób dyrektywa celna może łatwo wykorzystać dane przekazywane głównemu administratorowi.

Przyjrzyjmy się przykładowi niestandardowej dyrektywy AngularJS, pokazującej, jak możemy wykorzystać zakres kontrolera nadrzędnego w naszej dyrektywie niestandardowej.

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

Objaśnienie kodu

Najpierw tworzymy kontroler o nazwie „DemoController”. W tym przypadku definiujemy zmienną o nazwie tutorialName i dołączamy ją do obiektu zakresu w jednej instrukcji – $scope.tutorialName = „AngularJS”.
W naszej dyrektywie niestandardowej możemy wywołać zmienną „tutorialName” za pomocą wyrażenia. Ta zmienna byłaby dostępna, ponieważ jest zdefiniowana w kontrolerze „DemoController”, który stałby się rodzicem tej dyrektywy.
Odwołujemy się do kontrolera w znaczniku div, który będzie pełnił rolę naszego nadrzędnego znacznika div. Należy pamiętać, że należy to najpierw zrobić, aby nasza niestandardowa dyrektywa mogła uzyskać dostęp do zmiennej tutorialName.
W końcu dołączamy naszą niestandardową dyrektywę „ng-guru” do naszego znacznika div.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Powyższe dane wyjściowe wyraźnie pokazują, że nasza niestandardowa dyrektywa „ng-guru” korzysta ze zmiennej zakresu tutorialName w kontrolerze nadrzędnym.

Używanie kontrolerów z dyrektywami

Angular daje taką możliwość uzyskaj dostęp do zmiennej członkowskiej kontrolera bezpośrednio z dyrektyw niestandardowych bez potrzeby obiektu zakresu.

Czasami staje się to konieczne, ponieważ w aplikacji może znajdować się wiele obiektów zasięgu należących do wielu kontrolerów.

Istnieje więc duże prawdopodobieństwo, że możesz popełnić błąd, uzyskując dostęp do obiektu zakresu niewłaściwego kontrolera.

W takim scenariuszu istnieje sposób, aby wyraźnie wspomnieć o stwierdzeniu „Chcę uzyskać dostęp do tego konkretnego kontrolera” z mojej dyrektywy.

Przyjrzyjmy się przykładowi, jak możemy to osiągnąć.

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

Objaśnienie kodu

Najpierw tworzymy kontroler o nazwie „DemoController”. W tym miejscu zdefiniujemy zmienną o nazwie „tutorialName” i tym razem zamiast dołączać ją do obiektu zakresu, dołączymy ją bezpośrednio do kontrolera.
W naszej niestandardowej dyrektywie wyraźnie wspominamy, że chcemy używać kontrolera „DemoController” za pomocą słowa kluczowego parametru kontrolera.
Referencję do kontrolera tworzymy za pomocą parametru „controllerAs”. Jest to zdefiniowane przez Angular i jest sposobem odniesienia się do kontrolera jako odniesienia.

Uwaga: -W dyrektywie można uzyskać dostęp do wielu kontrolerów, określając odpowiednie bloki kontrolera, kontrolera i instrukcji szablonu.

Na koniec w naszym szablonie używamy odniesienia utworzonego w kroku 3 i zmiennej składowej, która została podłączona bezpośrednio do kontrolera w kroku 1.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Dane wyjściowe wyraźnie pokazują, że dyrektywa niestandardowa uzyskuje dostęp w szczególności do DemoController i dołączonej do niego zmiennej składowej tutorialName i wyświetla tekst „Angular”.

Jak tworzyć dyrektywy wielokrotnego użytku

Dostrzegliśmy już siłę dyrektyw niestandardowych, ale możemy przenieść ją na wyższy poziom, tworząc własne dyrektywy nadające się do ponownego wykorzystania.

Załóżmy na przykład, że chcemy wstawić kod, który zawsze będzie wyświetlał poniższe znaczniki HTML na wielu ekranach, co w zasadzie stanowi jedynie dane wejściowe dla „Imienia” i „wiek” użytkownika.

Aby ponownie używać tej funkcji na wielu ekranach bez kodowania za każdym razem, tworzymy główny element sterujący lub dyrektywę w formacie angular, aby przechowywać te elementy sterujące („Imię” i „wiek” użytkownika).

Zatem teraz, zamiast wpisywać za każdym razem ten sam kod na poniższym ekranie, możemy faktycznie osadzić ten kod w dyrektywie i osadzić tę dyrektywę w dowolnym momencie.

Zobaczmy przykład, jak możemy to osiągnąć.

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

Objaśnienie kodu

W naszym fragmencie kodu dyrektywy niestandardowej zmienia się tylko wartość nadana parametrowi szablonu naszej dyrektywy niestandardowej. Zamiast znacznika lub tekstu planu piątego, tak naprawdę wprowadzamy cały fragment 2 kontrolek wejściowych dla „ Imię” i „wiek”, które należy podać na naszej stronie.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z powyższych danych wynika, że do strony zostanie dodany fragment kodu z szablonu dyrektywy niestandardowej.

Dyrektywy i komponenty AngularJS – ng-transclude

Jak wspomnieliśmy już wcześniej, Angular ma za zadanie rozszerzać funkcjonalność HTML. Widzieliśmy już, jak możemy wstrzykiwać kod, używając niestandardowych dyrektyw wielokrotnego użytku.

Ale w nowoczesnym tworzeniu aplikacji internetowych istnieje również koncepcja tworzenia komponentów sieciowych. Zasadniczo oznacza to tworzenie własnych znaczników HTML, które można wykorzystać jako komponenty w naszym kodzie.

Dlatego angular zapewnia kolejny poziom możliwości rozszerzania znaczników HTML, dając możliwość wstrzykiwania atrybutów do samych znaczników HTML.

Dokonuje się tego poprzez „translacja ng”, który jest rodzajem ustawienia nakazującego Angularowi przechwytywanie wszystkiego, co jest umieszczone w dyrektywie w znacznikach.

Weźmy przykład tego, jak możemy to osiągnąć.

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

Objaśnienie kodu

Używamy tej dyrektywy do zdefiniowania niestandardowego znacznika HTML zwanego „pane” i dodania funkcji, która umieści niestandardowy kod dla tego znacznika. Na wyjściu nasz niestandardowy znacznik panelu wyświetli tekst „AngularJS” w prostokącie z solidną czarną ramką.
Atrybut „transclude” musi być wymieniony jako prawdziwy, co jest wymagane przez angular, aby wstawić ten znacznik do naszego DOM.
W zakresie definiujemy atrybut tytułu. Atrybuty są zwykle definiowane jako pary nazwa/wartość, np.: nazwa=”wartość”. W naszym przypadku nazwa atrybutu w tagu HTML naszego panelu to „title”. Symbol „@” jest wymogiem z angular. Dzieje się tak, aby po wykonaniu linii title={{title}} w kroku 5 niestandardowy kod atrybutu title został dodany do znacznika HTML panelu.
Niestandardowy kod atrybutów tytułu, który po prostu rysuje czarną ramkę dla naszej kontroli.
Na koniec wywołujemy nasz niestandardowy tag HTML wraz ze zdefiniowanym atrybutem title.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Dane wyjściowe wyraźnie pokazują, że atrybut tytułu znacznika HTML5 panelu został ustawiony na niestandardową wartość „Angular.JS”.

Zagnieżdżone dyrektywy

Dyrektywy w AngularJS mogą być zagnieżdżane. Podobnie jak wewnętrzne moduły lub funkcje w dowolnym język programowania, może być konieczne osadzenie dyrektyw w sobie.

Możesz to lepiej zrozumieć, oglądając poniższy przykład.

W tym przykładzie tworzymy 2 dyrektywy zwane „zewnętrzną” i „wewnętrzną”.

Dyrektywa wewnętrzna wyświetla tekst o nazwie „Inner”.
Podczas gdy dyrektywa zewnętrzna faktycznie wywołuje dyrektywę wewnętrzną, aby wyświetlić tekst o nazwie „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>

Objaśnienie kodu

Tworzymy dyrektywę zwaną „zewnętrzną”, która będzie zachowywać się jak nasza dyrektywa nadrzędna. Dyrektywa ta będzie następnie odwoływać się do dyrektywy „wewnętrznej”.
Ograniczenie: „E” jest wymagane przez angular, aby zapewnić dostępność danych z dyrektywy wewnętrznej dla dyrektywy zewnętrznej. Litera „E” jest skróconą formą słowa „Element”.
Tutaj tworzymy dyrektywę wewnętrzną, która wyświetla tekst „Inner” w znaczniku div.
W szablonie dyrektywy zewnętrznej (krok 4) wywołujemy dyrektywę wewnętrzną. Zatem tutaj wstrzykujemy szablon z dyrektywy wewnętrznej do dyrektywy zewnętrznej.
Na koniec bezpośrednio przywołujemy dyrektywę zewnętrzną.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

Można zauważyć, że wywołano zarówno dyrektywy zewnętrzne, jak i wewnętrzne, a tekst w obu znacznikach div został wyświetlony.

Obsługa zdarzeń w dyrektywie

Wydarzenia takie kliknięcia myszą lub przyciski można obsługiwać z poziomu samych dyrektyw. Odbywa się to za pomocą funkcji link. Funkcja link pozwala dyrektywie dołączyć się do elementów DOM na stronie HTML.

Składnia:

Składnia elementu link jest pokazana poniżej

ng-powtórz

link: function ($scope, element, attrs)

Funkcja link zwykle akceptuje 3 parametry, w tym zakres, element, z którym powiązana jest dyrektywa, oraz atrybuty elementu docelowego.

Spójrzmy na przykład, jak możemy to osiągnąć.

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

Objaśnienie kodu

Używamy funkcji link zdefiniowanej w angular, aby umożliwić dyrektywom dostęp do zdarzeń w DOM HTML.
Używamy słowa kluczowego „element”, ponieważ chcemy odpowiedzieć na zdarzenie dotyczące elementu HTML DOM, którym w naszym przypadku będzie element „div”. Następnie używamy funkcji „bind” i mówimy, że chcemy dodać niestandardową funkcjonalność do zdarzenia kliknięcia elementu. Słowo „kliknięcie” to słowo kluczowe używane do oznaczenia zdarzenia kliknięcia dowolnej kontrolki HTML. Na przykład kontrolka przycisku HTML zawiera zdarzenie kliknięcia. Ponieważ w naszym przykładzie chcemy dodać niestandardowy kod do zdarzenia kliknięcia naszego tagu „dev”, używamy słowa kluczowego „click”.
Mówimy tutaj, że chcemy zastąpić wewnętrzny kod HTML elementu (w naszym przypadku element div) tekstem „Kliknąłeś mnie!”.
Tutaj definiujemy nasz znacznik div tak, aby korzystał z niestandardowej dyrektywy ng-guru.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Początkowo użytkownikowi zostanie wyświetlony tekst „Kliknij mnie”, ponieważ został on pierwotnie zdefiniowany w znaczniku div. Po kliknięciu znacznika div zostaną wyświetlone poniższe dane wyjściowe

Podsumowanie

Można również utworzyć niestandardową dyrektywę, której można użyć do wstrzyknięcia kodu do głównej aplikacji kątowej.
Można utworzyć niestandardowe dyrektywy, aby wywoływać elementy zdefiniowane w obiekcie zakresu w określonym kontrolerze za pomocą słów kluczowych „Controller”, „controllerAs” i „template”.
Dyrektywy można również zagnieżdżać, aby zapewnić wbudowaną funkcjonalność, która może być wymagana w zależności od potrzeb aplikacji.
Dyrektywy można również udostępnić do ponownego wykorzystania, dzięki czemu można je wykorzystać do wstrzyknięcia wspólnego kodu, który może być wymagany w różnych aplikacjach internetowych.
Dyrektyw można również używać do tworzenia niestandardowych tagów HTML, które mają własną funkcjonalność zdefiniowaną zgodnie z wymaganiami biznesowymi.
Zdarzenia można także obsługiwać z poziomu dyrektyw obsługujących zdarzenia DOM, takie jak kliknięcia przyciskami i myszą.

Możesz lubić:

Co to jest dyrektywa celna?

Jak stworzyć dyrektywę niestandardową?

Objaśnienie kodu

Dyrektywy i zakresy AngularJs

Objaśnienie kodu

POWIĄZANE ARTYKUŁY

Używanie kontrolerów z dyrektywami

Objaśnienie kodu

Jak tworzyć dyrektywy wielokrotnego użytku

Objaśnienie kodu

Dyrektywy i komponenty AngularJS – ng-transclude

Objaśnienie kodu

Zagnieżdżone dyrektywy

Objaśnienie kodu

Obsługa zdarzeń w dyrektywie

Objaśnienie kodu

Podsumowanie