PRILAGOĐENE direktive u AngularJS: Kako stvoriti? [Primjeri]

Što je Custom Directive?

A Prilagođena direktiva u AngularJS je korisnički definirana direktiva koja korisnicima omogućuje korištenje željenih funkcija za proširenje HTML funkcionalnosti. Može se definirati pomoću funkcije “directive”, a zamjenjuje element za koji se koristi. Iako AngularJS ima puno snažnih direktiva odmah po gotovu, ponekad su potrebne prilagođene direktive.

Kako stvoriti prilagođenu direktivu?

Pogledajmo primjer kako možemo stvoriti AngularJS prilagođenu direktivu.

Prilagođena direktiva u našem slučaju jednostavno će ubaciti div oznaku koja ima tekst "AngularJS Tutorial" na našoj stranici kada se direktiva pozove.

<!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šnjenje koda

Prvo stvaramo a modul za našu kutnu primjenu. Ovo je potrebno za stvaranje prilagođene direktive jer će direktiva biti stvorena pomoću ovog modula.
Sada stvaramo prilagođenu direktivu pod nazivom "ngGuru" i definiramo funkciju koja će imati prilagođeni kod za našu direktivu.Napomena: - Imajte na umu da smo prilikom definiranja direktive definirali kao ngGuru sa slovom 'G' kao velikim. A kada mu pristupimo iz naše div oznake kao direktive, pristupamo mu kao ng-guru. Ovako Angular razumije prilagođene direktive definirane u aplikaciji. Prvo, naziv prilagođene direktive trebao bi započeti slovima 'ng'. Drugo, simbol crtice '-' trebao bi se spominjati samo kada se poziva direktiva. I treće, prvo slovo iza slova 'ng' pri definiranju direktive može biti malo ili veliko.
Koristimo parametar predloška koji je parametar definiran od strane Angulara za prilagođene direktive. U ovome definiramo da kad god se ova direktiva koristi, samo upotrijebite vrijednost predloška i ubacite je u pozivni kod.
Ovdje sada koristimo našu prilagođenu "ng-guru" direktivu. Kada to učinimo, vrijednost koju smo definirali za naš predložak " Upute za Angular JS ” sada će se ubrizgati ovdje.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Gornji rezultat jasno pokazuje da se naša prilagođena ng-guru direktiva, koja ima predložak definiran za prikazivanje prilagođenog teksta, prikazuje u pregledniku.

AngularJs direktive i opseg

Opseg je definiran kao ljepilo koje povezuje kontroler s pogledom upravljajući podacima između pogleda i kontrolera.

Prilikom izrade prilagođenih AngularJs direktiva, one će prema zadanim postavkama imati pristup objektu opsega u nadređenom kontroleru.

Na taj način prilagođenoj direktivi postaje jednostavno koristiti podatke koji se prosljeđuju glavnom kontroleru.

Pogledajmo primjer AngularJS prilagođene direktive kako možemo koristiti opseg nadređenog kontrolera u našoj prilagođenoj direktivi.

<!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šnjenje koda

Prvo kreiramo kontroler pod nazivom "DemoController". U ovome definiramo varijablu pod nazivom tutorialName i pridružujemo je objektu opsega u jednoj izjavi – $scope.tutorialName = “AngularJS”.
U našoj prilagođenoj direktivi, možemo pozvati varijablu "tutorialName" pomoću izraza. Ova bi varijabla bila dostupna jer je definirana u kontroleru “DemoController”, koji bi postao roditelj za ovu direktivu.
Referenciramo kontroler u div oznaci, koja će djelovati kao naša nadređena div oznaka. Imajte na umu da ovo prvo treba učiniti kako bi naša prilagođena direktiva mogla pristupiti varijabli tutorialName.
Na kraju samo prilažemo našu prilagođenu direktivu "ng-guru" našoj div oznaci.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Gornji rezultat jasno pokazuje da naša prilagođena direktiva "ng-guru" koristi varijablu opsega tutorialName u nadređenom kontroleru.

Korištenje kontrolera s direktivama

Angular daje mogućnost da pristupite varijabli člana kontrolera izravno iz prilagođenih direktiva bez potrebe za objektom opsega.

Ovo ponekad postaje neophodno jer u aplikaciji možete imati više objekata opsega koji pripadaju više kontrolera.

Dakle, postoji velika vjerojatnost da biste mogli pogriješiti pristupom objektu opsega pogrešnog kontrolera.

U takvom scenariju postoji način da se posebno spomene "Želim pristupiti ovom određenom kontroleru" iz moje direktive.

Pogledajmo primjer kako to možemo postići.

<!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šnjenje koda

Prvo kreiramo kontroler pod nazivom "DemoController". U ovom ćemo definirati varijablu pod nazivom "tutorialName" i ovaj put umjesto da je pripojimo objektu opsega, pripojit ćemo je izravno na kontroler.
U našoj prilagođenoj direktivi izričito spominjemo da želimo koristiti kontroler "DemoController" pomoću ključne riječi parametra kontrolera.
Referencu na kontroler stvaramo pomoću parametra “controllerAs”. To definira Angular i to je način referenciranja kontrolera kao reference.

Bilješka: -Moguće je pristupiti višestrukim kontrolerima u direktivi određivanjem odgovarajućih blokova kontrolera, kontroleraAs i iskaza predloška.

Konačno, u našem predlošku koristimo referencu stvorenu u 3. koraku i koristimo varijablu člana koja je pridružena izravno kontroleru u 1. koraku.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Izlaz jasno pokazuje da prilagođena direktiva posebno pristupa DemoControlleru i varijabli člana tutorialName koja mu je priložena i prikazuje tekst "Angular".

Kako stvoriti upute za višekratnu upotrebu

Već smo vidjeli snagu prilagođenih direktiva, ali to možemo podići na višu razinu izgradnjom vlastitih direktiva koje se mogu ponovno koristiti.

Recimo, na primjer, da smo htjeli ubaciti kod koji bi uvijek prikazivao donje HTML oznake na više zaslona, što je u osnovi samo unos za "Ime" i "dob" korisnika.

Za ponovno korištenje ove funkcije na više zaslona bez kodiranja svaki put, stvaramo glavnu kontrolu ili direktivu u Angularu za držanje ovih kontrola ("Ime" i "dob" korisnika).

Dakle, sada, umjesto da svaki put unosimo isti kod za ekran ispod, možemo zapravo ugraditi ovaj kod u direktivu i ugraditi tu direktivu u bilo kojem trenutku.

Pogledajmo primjer kako to možemo postići.

<!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šnjenje koda

U našem isječku koda za prilagođenu direktivu, ono što se mijenja je samo vrijednost koja je dana parametru predloška naše prilagođene direktive. Umjesto oznake plana pet ili teksta, mi zapravo unosimo cijeli fragment od 2 kontrole unosa za " Ime” i “dob” koji moraju biti prikazani na našoj stranici.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz gornjeg rezultata možemo vidjeti da se isječak koda iz predloška prilagođene direktive dodaje na stranicu.

AngularJS Direktive i komponente – ng-transclude

Kao što smo već spomenuli, Angular je namijenjen proširenju funkcionalnosti HTML. I već smo vidjeli kako možemo imati umetanje koda korištenjem prilagođenih direktiva koje se mogu ponovno koristiti.

Ali u modernom razvoju web aplikacija postoji i koncept razvoja web komponenti. Što u osnovi znači stvaranje vlastitih HTML oznaka koje se mogu koristiti kao komponente u našem kodu.

Stoga Angular pruža drugu razinu snage za proširenje HTML oznaka dajući mogućnost ubacivanja atributa u same HTML oznake.

To radi "ng-prebaciti” oznaka, koja je vrsta postavke koja govori angularu da uhvati sve što je stavljeno unutar direktive u označavanju.

Uzmimo primjer kako to možemo postići.

<!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šnjenje koda

Koristimo direktivu za definiranje prilagođene HTML oznake pod nazivom 'okno' i dodajemo funkciju koja će staviti prilagođeni kod za ovu oznaku. U izlazu će naša prilagođena oznaka okna prikazati tekst "AngularJS" u pravokutniku s punim crnim rubom.
Atribut "transclude" mora se spomenuti kao istinit, što zahtijeva angular za umetanje ove oznake u naš DOM.
U opsegu definiramo atribut naslova. Atributi se obično definiraju kao parovi ime/vrijednost poput: ime=”vrijednost”. U našem slučaju, naziv atributa u našoj HTML oznaci okna je "title". Simbol “@” je zahtjev od Angular. To je učinjeno tako da kada se redak title={{title}} izvrši u koraku 5, prilagođeni kod za atribut naslova bude dodan u HTML oznaku okna.
Prilagođeni kod za atribute naslova koji samo iscrtava čvrstu crnu granicu za našu kontrolu.
Konačno, pozivamo našu prilagođenu HTML oznaku zajedno s atributom naslova koji je definiran.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Izlaz jasno pokazuje da je atribut naslova html5 oznake okna postavljen na prilagođenu vrijednost "Angular.JS".

Ugniježđene direktive

Direktive u AngularJS mogu biti ugniježđene. Kao samo unutarnji moduli ili funkcije u bilo kojem programski jezik, možda ćete morati ugraditi direktive jednu u drugu.

Ovo možete bolje razumjeti ako pogledate primjer u nastavku.

U ovom primjeru stvaramo 2 direktive nazvane "vanjski" i "unutarnji".

Unutarnja direktiva prikazuje tekst pod nazivom "Inner".
Dok vanjska direktiva zapravo poziva unutarnju direktivu za prikaz teksta pod nazivom "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šnjenje koda

Stvaramo direktivu pod nazivom "outer" koja će se ponašati kao naša roditeljska direktiva. Ova direktiva će tada uputiti poziv "unutarnjoj" direktivi.
Angular zahtijeva restrict:'E' kako bi osigurao da su podaci iz unutarnje direktive dostupni vanjskoj direktivi. Slovo 'E' je skraćeni oblik riječi 'Element'.
Ovdje stvaramo unutarnju direktivu koja prikazuje tekst "Inner" u div oznaci.
U predlošku za vanjsku direktivu (korak#4), pozivamo unutarnju direktivu. Dakle, ovdje ubacujemo predložak iz unutarnje direktive u vanjsku direktivu.
Konačno, izravno pozivamo na vanjsku direktivu.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza,

Može se vidjeti da su pozvane i vanjska i unutarnja direktiva i prikazan je tekst u obje div oznake.

Rukovanje događajima u direktivi

Događaji takvim klikovima mišem ili gumbima može se upravljati unutar samih direktiva. To se radi pomoću funkcije veze. Funkcija veze je ono što omogućuje direktivi da se pričvrsti na DOM elemente na HTML stranici.

Sintaksa:

Sintaksa elementa veze je prikazana u nastavku

ng-ponovi

link: function ($scope, element, attrs)

Funkcija povezivanja obično prihvaća 3 parametra uključujući opseg, element s kojim je direktiva povezana i atribute ciljnog elementa.

Pogledajmo primjer kako to možemo postići.

<!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šnjenje koda

Koristimo funkciju veze kako je definirana u angularu kako bismo direktivama omogućili pristup događajima u HTML DOM-u.
Koristimo ključnu riječ 'element' jer želimo odgovoriti na događaj za HTML DOM element, koji će u našem slučaju biti element "div". Tada koristimo funkciju "bind" i kažemo da želimo dodati prilagođenu funkcionalnost klik događaju elementa. Riječ 'klik' ključna je riječ koja se koristi za označavanje događaja klika bilo koje HTML kontrole. Na primjer, kontrola HTML gumba ima događaj klika. Budući da u našem primjeru želimo dodati prilagođeni kod događaju klika naše oznake "dev", koristimo ključnu riječ "klik".
Ovdje kažemo da želimo zamijeniti unutarnji HTML elementa (u našem slučaju elementa div) s tekstom 'Kliknuli ste na mene!'.
Ovdje definiramo našu div oznaku za korištenje prilagođene direktive ng-guru.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

U početku će korisniku biti prikazan tekst 'Klikni me' jer je to ono što je inicijalno definirano u oznaci div. Kada zapravo kliknete na oznaku div, prikazat će se donji izlaz

rezime

Također se može stvoriti prilagođena direktiva koja se može koristiti za umetanje koda u glavnu kutnu aplikaciju.
Prilagođene direktive mogu se napraviti za pozivanje članova definiranih u objektu opsega u određenom kontroleru korištenjem ključnih riječi 'Kontroler', 'kontrolerAs' i 'predložak'.
Direktive se također mogu ugniježditi kako bi se osigurala ugrađena funkcionalnost koja može biti potrebna ovisno o potrebama aplikacije.
Direktive se također mogu ponovno koristiti tako da se mogu koristiti za umetanje zajedničkog koda koji bi mogao biti potreban u različitim web aplikacijama.
Direktive se također mogu koristiti za stvaranje prilagođenih HTML oznaka koje bi imale vlastitu funkcionalnost definiranu prema poslovnim zahtjevima.
Događajima se također može upravljati unutar direktiva za rukovanje DOM događajima kao što su klikovi gumba i miša.

Možda ti se svidi:

Što je Custom Directive?

Kako stvoriti prilagođenu direktivu?

Objašnjenje koda

AngularJs direktive i opseg

Objašnjenje koda

POVEZANI ČLANCI

Korištenje kontrolera s direktivama

Objašnjenje koda

Kako stvoriti upute za višekratnu upotrebu

Objašnjenje koda

AngularJS Direktive i komponente – ng-transclude

Objašnjenje koda

Ugniježđene direktive

Objašnjenje koda

Rukovanje događajima u direktivi

Objašnjenje koda

rezime