Kako umjetna inteligencija može pomoći u testiranju prilagođene direktive?

AI asistenti generiraju kosture jediničnih testova koji kompiliraju direktivu, pridružuju opseg i postavljaju tvrdnje na renderirani izlaz. Dobri su u popisivanju rubnih slučajeva, stoga generirane tvrdnje tretirajte kao početni nacrt.

AngularJS prilagođena direktiva: Predlošci, opseg i uključivanje

⚡ Pametni sažetak

Prilagođene direktive u AngularJS-u proširuju HTML ponašanjem koje sami definirate i koje se može ponovno upotrijebiti. Tvornica direktiva vraća objekt definicije, a AngularJS pridružuje to ponašanje gdje god se odgovarajući element, atribut, klasa ili komentar pojavi u kodu za označavanje.

🏗️ Registracija: Metoda module.directive uzima normalizirano ime plus tvorničku funkciju koja vraća objekt definicije direktive.
🔤 imenovanje: Imena su unutar camelCasea JavaSkripta i velika i mala slova za kebab unutar HTML-a, tako da ngGuru je napisano kao ng-guru na stranici.
🎯 podudaranje: Svojstvo restrict odlučuje hoće li AngularJS odgovarati elementu, atributu, klasi ili komentaru, a zadana vrijednost je EA.
🧬 Pristup opsegu: Direktiva dijeli roditeljski opseg prema zadanim postavkama, dok opcija opsega gradi izolirani opseg s vezama @, =, & ili <.
🔗 Funkcija poveznice: Funkcija povezivanja prima opseg, element i atribute, te je ispravno mjesto za DOM slušače i čišćenje.
🧱 Sastav: Direktive se ugnijezde jedna u drugu, omotaju proizvoljnu oznaku putem transkluzije i izlažu API bratskim jedinicama putem kontrolera.
⚠️ Status podrške: AngularJS je dosegao kraj životnog ciklusa 31. prosinca 2021. i ne prima daljnje zakrpe ili sigurnosne ispravke.

Pročitaj više

Što je prilagođena direktiva u AngularJS-u?

A Prilagođena direktiva U AngularJS-u je korisnički definirana direktiva koja proširuje HTML ponašanjem koje sami napišete. Registrirana je na modul pomoću funkcije „direktive“, a AngularJS je prilaže gdje god se odgovarajući element ili atribut pojavi na stranici. Iako AngularJS ima mnogo moćnih ugrađene direktive odmah iz kutije, kao što je ng-ponovi, ponekad su potrebne prilagođene direktive.

⚠️ Ispravak: U izvorniku je pisalo da prilagođena direktiva „zamjenjuje element za koji se koristi“. Prema zadanim postavkama, ne: template umetnut je u usklađeni element. Potrebe za zamjenom replace: true, zastarjelo od AngularJS 1.3.

⚠️ Obavijest o podršci: AngularJS dosegnut kraj životnog vijeka 31. prosinca 2021. i ne prima daljnje zakrpe ili sigurnosne ispravke. Sve u nastavku ostaje točno za održavanje postojećeg AngularJS 1.x koda; u modernom Angularu ekvivalenti su komponente i atributne direktive.

Razlog za korištenje prilagođene direktive je ponavljanje. Kada se ista oznaka ili DOM ožičenje pojavi na nekoliko zaslona, direktiva ga pretvara u jednu imenovanu oznaku.

Kako stvoriti prilagođenu direktivu?

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

Prilagođena direktiva u našem slučaju će jednostavno ubrizgati div oznaku koja sadrži tekst "Angular JS Tutorial" na našoj stranici kada se direktiva pozove.

Snimka zaslona s bilješkama u nastavku numerira četiri dijela popisa objašnjena nakon nje.

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

⚠️ Upozorenje — nedostaci sačuvani u ovom oglasu: Kod je reproduciran točno onako kako je objavljen. Tri nedostatka se ponavljaju u svakom popisu ovdje: chrset="UTF 8" bi trebao biti charset="UTF-8"; angular.js i angular.min.js oba se učitavaju, pa se AngularJS učitava dva puta; i angular-route.js učitava se prije datoteke od koje ovisi.

Code Objašnjenje

Prvo stvaramo a modul za našu AngularJS aplikaciju. Ovo je potrebno za izradu prilagođene direktive jer će direktiva biti kreirana pomoću ovog modula.
Sada stvaramo prilagođenu direktivu pod nazivom "ngGuru” i definiranje tvorničke funkcije koja će sadržavati prilagođeni kod za našu direktivu.
Koristimo parametar predloška, koji je parametar definiran od strane AngularJS-a za prilagođene direktive. Ovdje definiramo da kad god se ova direktiva koristi, samo se koristi vrijednost predloška i ubrizgava je u pozivni kod.
Ovdje sada koristimo našu prilagođenu direktivu "ng-guru". Kada to učinimo, vrijednost koju smo definirali za naš predložak, <div>Angular JS Tutorial</div>, sada će se ovdje ubrizgati.

Imenovanje i normalizacija direktiva

Neusklađenost imena između JavaSkripta i HTML zbunjuju većinu početnika. AngularJS normalizira svaki element i naziv atributa prije nego što ga usporedi: uklanja sve x- or data- prefiks, a zatim pretvara ime razgraničeno s -, : or _ u camelCase. Zato ngGuru šibice ng-guru, i zašto data-ng-guru također funkcionira. Oblik camelCase je pravo ime; kebab-case je jednostavno način na koji je napisano u HTML-u.

⚠️ Ispravak: U izvornom tekstu je pisalo da naziv prilagođene direktive „treba počinjati slovima 'ng'“. službena AngularJS dokumentacija savjetuje suprotno: nikada ne stavljajte prefiks vlastitim direktivama s ngili se mogu kolidirati s budućim ugrađenim. Koristite vlastiti prefiks, kao što je g99Guru zapisano kao g99-guru.

Ako se kod uspješno izvrši, pojavljuje se ovaj izlaz.

Izlaz:

Izlaz jasno pokazuje da se naša prilagođena direktiva ng-guru, koja ima definiran predložak za prikaz prilagođenog teksta, prikazuje u pregledniku. Sljedeći korak je staviti nešto vrijedno ponovne upotrebe unutar tog predloška.

Kako stvoriti direktive 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 želimo ubrizgati kod koji bi uvijek prikazivao dolje navedene HTML oznake na više ekrana, što je u osnovi samo unos za "Ime" i "Dob" korisnika.

Kako bismo ponovno koristili ovaj fragment na više ekrana bez kodiranja svaki put, stvaramo glavnu kontrolu ili direktivu u AngularJS-u koja sadrži ove dvije kontrole.

Dakle, sada, umjesto ponavljanja tog označavanja na svakom zaslonu, ugrađujemo ga u direktivu i umjesto toga pozivamo direktivu. Snimka zaslona ispod označava jedini redak koji se mijenja.

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

Code Objašnjenje

U našem isječku koda za prilagođenu direktivu, mijenja se samo vrijednost koja se daje parametru predloška. Umjesto obične oznake ili retka teksta, unosimo cijeli fragment dviju ulaznih kontrola za "Ime" i "Dob" koji se trebaju prikazati na našoj stranici.

💡 Savjet: Predložak ove duljine pripada zasebnoj datoteci. Zamijeni template za templateUrl: 'name-age.html'.

Ako se kod uspješno izvrši, pojavljuje se ovaj izlaz.

Izlaz:

Iz gornjeg rezultata možemo vidjeti da se isječak koda iz predloška prilagođene direktive dodaje na stranicu. Predložak je i dalje statičan, pa je sljedeći korak unošenje podataka u njega.

AngularJS direktive i opseg

The djelokrug definira se kao ljepilo koje veže kontroler za pogled upravljajući podacima između pogleda i kontrolera.

Prilikom izrade prilagođenih AngularJS direktiva, one će prema zadanim postavkama imati pristup objektu scope u roditeljskom kontroleru. To je isti objekt scope, a ne kopija.

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

Pogledajmo primjer kako možemo koristiti opseg roditeljskog kontrolera u našoj prilagođenoj direktivi. Snimka zaslona u nastavku prikazuje četiri koraka.

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

Prvo stvaramo kontroler pod nazivom „DemoController“. U njemu definiramo varijablu pod nazivom tutorialName i pridružujemo je objektu opsega u jednoj naredbi: $scope.tutorialName = "Angular JS".
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 kod uspješno izvrši, pojavljuje se ovaj izlaz.

Izlaz:

Gornji izlaz jasno pokazuje da naša prilagođena direktiva „ng-guru“ koristi varijablu opsega tutorialName u roditeljskom kontroleru. Dijeljenje roditeljskog opsega je praktično, ali nije uvijek ono što želite.

Korištenje kontrolera s direktivama

AngularJS pruža mogućnost za pristupite varijabli člana kontrolera izravno iz prilagođenih direktiva bez potrebe za objektom opsega.

To ponekad postaje nužno jer aplikacija može imati više objekata opsega koji pripadaju više kontrolera, pa postoji velika vjerojatnost da se greškom pristupi objektu opsega pogrešnog kontrolera.

U takvom scenariju postoji način da se u mojoj direktivi izričito kaže „Želim pristupiti ovom kontroleru“.

Pogledajmo primjer kako to možemo postići. Snimka zaslona broji četiri koraka.

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

Prvo stvaramo kontroler pod nazivom „DemoController“. U njemu ćemo definirati varijablu pod nazivom „tutorialName“ i ovaj put, umjesto da je priložimo objektu opsega, priložit ćemo je izravno kontroleru.
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“. Ovo je definirano u AngularJS-u i to je način referenciranja kontrolera pomoću aliasa.
Konačno, u našem predlošku koristimo referencu stvorenu u koraku 3 i koristimo varijablu člana koja je izravno pridružena kontroleru u koraku 1.

Bilješka: Moguće je pristupiti više kontrolera u direktivi specificiranjem odgovarajućih blokova kontrolera, controllerAs i naredbi predloška. Da biste došli do roditelj umjesto toga koristite kontroler direktive require.

Ako se kod uspješno izvrši, pojavljuje se ovaj izlaz.

Izlaz:

Izlaz jasno pokazuje da prilagođena direktiva pristupa DemoControlleru i varijabli članici tutorialName koja je njemu pridružena, te prikazuje tekst „Angular“. Oba pristupa i dalje čitaju iz dijeljenog opsega, što izolirani opseg sprječava.

Kako se poveznice @, =, & i < razlikuju u izoliranom opsegu

Direktiva koja dijeli svoj roditeljski opseg može se koristiti samo jednom po kontroleru, jer bi se dvije kopije borile za iste varijable. scope objekt stvara izolirati opseg: direktiva ne vidi ništa izvana osim svojstava koja ste naveli. Svaki unos koristi prefiks koji deklarira kako se njegova vrijednost prenosi.

Simbol	Smjer	Primljena vrijednost	Koristite ga za
@	Jednosmjerni ulaz	Atribut kao interpolirani niz znakova	Oznake, naslovi, bilo koji običan tekst
=	Dvosmjeran	Sam živi objekt ili vrijednost	Modeli kojima direktiva piše natrag
&	Vanjski poziv	Funkcija koja procjenjuje izraz u vanjskom opsegu	Povratni pozivi kao što su pri zatvaranju ili pri spremanju
<	Jednosmjerni ulaz	Procijenjena vrijednost, nikada zapisana prema gore	Podaci samo za čitanje, dodani u AngularJS 1.5

💡 Savjet: Dohvatiti < prije =Jednosmjerno vezanje je jeftinije za praćenje i sprječava komponentu da tiho mutira podatke pozivatelja. Sljedeći odjeljak koristi @.

AngularJS direktive i komponente: ng-transclude

Kao što smo već spomenuli, AngularJS 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 razvojaping web komponente, što u osnovi znači stvaranje vlastitih HTML oznaka koje se mogu koristiti kao komponente u našem kodu.

Stoga AngularJS pruža još jednu razinu moći za proširivanje HTML oznaka dajući mogućnost omatanja bilo kojeg označavanja koje pozivatelj stavi unutar oznake.

To radi "ng-prebaciti” direktiva, koja AngularJS-u govori da uhvati sve što se stavi unutar prilagođene oznake u markupu i da to u tom trenutku ubaci u predložak.

Uzmimo primjer kako to možemo postići. Snimka zaslona broji pet točaka koje slijede.

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

Koristimo direktivu za definiranje prilagođene HTML oznake pod nazivom "pane", s tvorničkom funkcijom koja daje njezin kod. U izlazu, oznaka pane prikazuje tekst "Angular JS" u pravokutniku s punim crnim rubom.
Svojstvo „transclude“ mora biti postavljeno na true, što AngularJS-u govori da zadrži izvorni unutarnji kod i učini ga dostupnim ng-transclude.
U objektu opsega deklariramo poveznicu naslova. Atributi se obično pišu kao parovi ime/vrijednost, kao što je name="value"U našem slučaju atribut na oznaci okna je "title", a simbol "@" traži od AngularJS-a da kopira taj atribut kao interpolirani niz.
Predložak crta puni crni obrub za našu kontrolu i označava mjesto gdje se umeće transcludirana oznaka.
Konačno, pozivamo našu prilagođenu HTML oznaku zajedno s definiranim atributom title.

⚠️ Ispravak: Izvorni tekst je opisivao "@" kao "zahtjev iz Angulara". To nije formalnost: @ je jedan od četiri simbola povezivanja izolata u gornjoj tablici i uvijek vraća niz znakova. Ovaj predložak također nikada ne prikazuje {{title}}i nijedan kontroler ne definira title, tako da je vidljiv samo transkribirani tekst.

Ako se kod uspješno izvrši, pojavljuje se ovaj izlaz.

Izlaz:

Izlaz prikazuje element prilagođenog okna prikazan kao obrubljeni okvir koji sadrži uključeni tekst „Angular JS“.

Direktiva može sadržavati i druge direktive, što je način na koji se sastavljaju veće komponente.

Ugniježđene direktive

Direktive u AngularJS-u mogu biti ugniježđene. Poput unutarnjih modula ili funkcija 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".

Snimka zaslona u nastavku označava obje definicije direktiva i točku gdje jedna poziva drugu.

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

⚠️ Upozorenje — nedostatak je sačuvan u ovom oglasu: Objavljeni popis počinje od </head>, propuštajući njegovo otvaranje <!DOCTYPE html>, <html> i <head> linije. Dodajte ih prije pokretanja.

Code Objašnjenje

Stvaramo direktivu pod nazivom "outer" koja će se ponašati kao naša roditeljska direktiva. Ova direktiva će tada uputiti poziv "unutarnjoj" direktivi.
The restrict:'E' Opcija govori AngularJS-u da uskladi svaku direktivu s element ime, zbog čega se mogu napisati kao oznake <outer> i <inner>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 pozivamo unutarnju direktivu. Dakle, ovdje ubrizgavamo predložak iz unutarnje direktive u vanjsku direktivu.
Konačno, izravno pozivamo na vanjsku direktivu.

⚠️ Ispravak: Izvorni tekst koji je zatražen restrict:'E' potreban je „kako bi se osiguralo da su podaci iz unutarnje direktive dostupni vanjskoj direktivi“. Ne radi ništa slično; samo kontrolira kako može se napisati direktiva. Ugniježđivanje funkcionira jer kompajler neprestano ulazi u predložak koji je upravo umetnuo. Za dijeljenje podataka koristite require i controller.

Ako se kod uspješno izvrši, pojavljuje se ovaj izlaz.

Izlaz:

Iz izlaza,

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

Renderiranje oznaka je samo polovica onoga što direktiva radi; druga polovica reagira na korisnika.

Obrada događaja u direktivi

Događaji Kao što su klikovi miša ili klikovi gumba mogu se obraditi unutar samih direktiva. To se radi pomoću funkcije link. Funkcija link omogućuje direktivi da se veže za DOM elemente na HTML stranici.

Sintaksa:

Sintaksa funkcije povezivanja je prikazana u nastavku.

link: function ($scope, element, attrs)

Funkcija povezivanja obično prihvaća 3 parametra: opseg, element s kojim je direktiva povezana i atribute ciljnog elementa. Još dva, obvezni kontroler i funkcija transclude, dolaze kada se primijene.

Faza kompajliranja u odnosu na fazu povezivanja

AngularJS obrađuje direktivu u dva prolaza, a poznavanje koja je koja govori gdje vaš kod pripada.

Sastaviti izvršava se jednom na elementu predloška, prije nego što postoji bilo kakav opseg. Odgovara strukturnim uređivanjima koje dijeli svaki klon.
Veza pokreće se jednom po instanci, nakon što je predložak kloniran i opseg pridružen. DOM slušači i čitanja opsega pripadaju ovdje.

Budući da kompajliranje nema opseg, sve što treba podatke pripada poveznici, zbog čega primjer u nastavku definira link sama.

Pogledajmo primjer kako to možemo postići. Snimka zaslona broji četiri točke u nastavku.

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

Koristimo funkciju link kako je definirano u AngularJS-u kako bismo direktivi dali mogućnost pristupa događajima u HTML DOM-u.
Koristimo ključnu riječ 'element' jer želimo odgovoriti na događaj za HTML DOM element, što je u našem slučaju element "div". Zatim koristimo funkciju "bind" za dodavanje prilagođene funkcionalnosti događaju klika elementa. Riječ 'click' je ključna riječ koja se koristi za označavanje događaja klika bilo koje HTML kontrole.
Ovdje kažemo da želimo zamijeniti unutarnji HTML elementa, u našem slučaju elementa div, tekstom 'Kliknuli ste na mene'.
Ovdje definiramo našu div oznaku za korištenje prilagođene direktive ng-guru.

💡 Savjet: Direktiva bi trebala čistiti za sobom. Uklonite sve slušače koji nadžive element unutra. element.on('$destroy', ...)ili stranica gubi memoriju.

Ako se kod uspješno izvrši, pojavljuje se ovaj izlaz.

Izlaz:

U početku se korisniku prikazuje tekst 'Klikni me' jer je to ono što je definirano unutar div oznake. Kada kliknete na div oznaku, umjesto toga se prikazuje donji izlaz.

Svaki gornji primjer koristio je jedno ili dva svojstva istog objekta definicije. Cijeli skup vrijedi zadržati.ping pri ruci.

Referenca svojstava objekta definicije direktive

Objekt koji vraća tvornica direktiva je Objekt definicije direktiveSvako svojstvo odgovara na jedno pitanje o tome kako se direktiva ponaša.

Svojstvo	Zadano	Ono što se također
ograničiti	'EA'	Koji se oblici podudaraju: E element, A atribut, C klasa, M komentar
Predložak	nijedan	Umetnuta je inline oznaka u podudarni element
predloškaUrl	nijedan	Putanja datoteke predloška, dohvaćena jednom, a zatim predmemorirana
djelokrug	lažan	false dijeli roditeljski opseg, true stvara dijete, objekt izolira
kontrolor	nijedan	Konstruktor koji otkriva API koji mogu zahtijevati druge direktive
kontrolerAs	nijedan	Alias za kontroler unutar predloška
zahtijevati	nijedan	Kontroler druge direktive za ubrizgavanje; ^ pretražuje roditelje, ^^ preskače sebe, ? opcionalno
link	nijedan	Funkcija po instanci: opseg, element, atributi, kontroler, transcludeFn
sastaviti	nijedan	Izvodi se jednom na predlošku prije nego što postoji bilo koji opseg
uključiti	lažan	Čuva izvorni unutarnji markup za ng-transclude
prioritet	0	Redoslijed kompajliranja na dijeljenom elementu; viši se izvršava prvi
terminal	lažan	Zaustavlja direktive nižeg prioriteta na tom elementu
zamijeniti	lažan	Zamjenjuje element za predložak. Zastarjelo od verzije 1.3.

💡 Savjet: Počnite s restrict, template i link, dodati scope za ponovnu upotrebu, controller i require za pozive od direktive do direktive i ostavite priority i terminal sama.

Pitanja i odgovori

Komponenta, dodana u AngularJS 1.5, je direktiva s određenim zadanim postavkama: podudaranje samo elemenata, izolirani opseg i kontroler. Koristite komponentu za samostalni prikaz, a direktivu kada vam je potreban DOM pristup na razini veze.

Obično ime nije ispravno normalizirano ili restrict isključuje oblik koji ste koristili. Direktiva registrirana kao myBox odgovara my-box, a ne mybox, a oznaka elementa mora biti ograničena na E.

Da. AI Asistenti mapiraju izolirani opseg na dekoratere ulaza i izlaza i predložak na predložak komponente. Revručno pregledajte DOM kod za transkluziju i poveznu funkciju, budući da se oni rijetko čisto prevode.

AI asistenti generiraju jedinični test kosturi koji kompajliraju direktivu, pridružuju opseg i utvrđuju vrijednosti na renderiranom izlazu. Dobri su u popisivanju rubnih slučajeva, stoga generirane tvrdnje tretirajte kao početni nacrt.

Koristite templateUrl kada oznaka naraste preko jednog ili dva retka. Datoteka se može uređivati uobičajenim HTML alatima i dohvaća se samo jednom, a zatim se poslužuje iz predmemorije predloška za svaku sljedeću instancu.

AngularJS prilagođena direktiva: Predlošci, opseg i uključivanje

Što je prilagođena direktiva u AngularJS-u?

Kako stvoriti prilagođenu direktivu?

Code Objašnjenje

Imenovanje i normalizacija direktiva

Kako stvoriti direktive za višekratnu upotrebu

Code Objašnjenje

AngularJS direktive i opseg

Code Objašnjenje

Korištenje kontrolera s direktivama

Code Objašnjenje

Kako se poveznice @, =, & i < razlikuju u izoliranom opsegu

AngularJS direktive i komponente: ng-transclude

Code Objašnjenje

Ugniježđene direktive

Code Objašnjenje

Obrada događaja u direktivi

Faza kompajliranja u odnosu na fazu povezivanja

Code Objašnjenje

Referenca svojstava objekta definicije direktive

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten

Što je prilagođena direktiva u AngularJS-u?

Kako stvoriti prilagođenu direktivu?

Code Objašnjenje

Imenovanje i normalizacija direktiva

Kako stvoriti direktive za višekratnu upotrebu

Code Objašnjenje

POVEZANI ČLANCI

AngularJS direktive i opseg

Code Objašnjenje

Korištenje kontrolera s direktivama

Code Objašnjenje

Kako se poveznice @, =, & i < razlikuju u izoliranom opsegu

AngularJS direktive i komponente: ng-transclude

Code Objašnjenje

Ugniježđene direktive

Code Objašnjenje

Obrada događaja u direktivi

Faza kompajliranja u odnosu na fazu povezivanja

Code Objašnjenje

Referenca svojstava objekta definicije direktive

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten