Kaj je direktiva po meri?
Direktiva po meri v Angular Js je uporabniško določena direktiva z vašo želeno funkcionalnostjo. Čeprav ima AngularJS na voljo veliko zmogljivih direktiv, so včasih potrebne direktive po meri.
V tej vadnici boste izvedeli-
- Kako ustvariti direktivo po meri?
- Direktive in področja uporabe AngularJs
- Uporaba krmilnikov z direktivami
- Kako ustvariti direktive za večkratno uporabo
- Direktive in sestavni deli AngularJS - ng-transclude
- Vgnezdene direktive
- Obravnavanje dogodkov v direktivi
Kako ustvariti direktivo po meri?
Oglejmo si primer, kako lahko ustvarimo direktivo po meri.
V našem primeru bo direktiva po meri preprosto vstavila oznako div, ki ima na naši strani besedilo "AngularJS Tutorial", ko jo pokličete.
Event Registration Guru99 Global Event
Razlaga kode:
- Najprej ustvarjamo modul za našo kotno aplikacijo. To je potrebno za izdelavo direktive po meri, ker bo direktiva ustvarjena s tem modulom.
- Zdaj ustvarjamo direktivo po meri, imenovano "ngGuru", in definiramo funkcijo, ki bo imela kodo po meri za našo direktivo.
Opomba:-
Upoštevajte, da smo jo pri opredelitvi direktive opredelili kot ngGuru s črko „G“ kot glavni. In ko do nje dostopamo iz naše oznake div kot direktivo, jo dostopamo kot ng-guru. Tako angular razume direktive po meri, definirane v aplikaciji. Najprej se ime direktive po meri začne s črkami 'ng'. Drugič, vezaj '-' je treba omeniti le pri klicanju direktive. In tretjič, prva črka, ki sledi črkam „ng“, je pri določanju direktive lahko majhna ali velika.
- Uporabljamo parameter predloge, ki je parameter, ki ga za direktive po meri definira Angular. Pri tem definiramo, da kadar koli se uporabi ta direktiva, samo uporabite vrednost predloge in jo vbrizgajte v klicno kodo.
- Tu se zdaj poslužujemo naše po meri izdelane direktive "ng-guru". Ko bomo to storili, bo zdaj tukaj vstavljena vrednost, ki smo jo določili za našo predlogo "Vodič za Angular JS".
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
- Zgornji izhod jasno kaže, da se naša smernica ng-guru po meri, ki ima določeno predlogo za prikaz besedila po meri, prikaže v brskalniku.
Direktive in področja uporabe AngularJs
Obseg je opredeljen kot lepilo, ki krmilnik veže na pogled z upravljanjem podatkov med pogledom in krmilnikom.
Pri ustvarjanju direktiv AngularJs po meri bodo privzeto imeli dostop do predmeta obsega v nadrejenem krmilniku.
Na ta način direktiva po meri enostavno uporabi podatke, ki se posredujejo glavnemu krmilniku.
Oglejmo si primer, kako lahko uporabimo obseg nadrejenega krmilnika v naši direktivi po meri.
Event Registration Guru99 Global Event
Razlaga kode:
- Najprej ustvarimo krmilnik, imenovan "DemoController". V tem smo definirali spremenljivko, imenovano tutorialName, in jo pritrdili na objekt obsega v enem stavku - $ scope.tutorialName = "AngularJS".
- V naši direktivi po meri lahko spremenljivko "tutorialName" pokličemo z uporabo izraza. Ta spremenljivka bi bila dostopna, ker je definirana v krmilniku "DemoController", ki bi postal nadrejeni za to direktivo.
- Na krmilnik se sklicujemo v oznaki div, ki bo delovala kot naša nadrejena oznaka div. Upoštevajte, da je to treba storiti najprej, da lahko naša direktiva po meri dostopa do spremenljivke tutorialName.
- Končno samo pripišemo našo direktivo po meri "ng-guru" na našo oznako div.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
- Zgornji izhod jasno kaže, da naša direktiva po meri "ng-guru" uporablja spremenljivko obsega tutorialName v nadrejenem krmilniku.
Uporaba krmilnikov z direktivami
Angular omogoča možnost dostopa do spremenljivke člana krmilnika neposredno iz direktiv po meri, ne da bi bil potreben objekt obsega.
To včasih postane potrebno, ker imate v aplikaciji več predmetov obsega, ki pripadajo več krmilnikom.
Torej obstaja velika verjetnost, da bi lahko napačno dostopali do predmeta obsega napačnega krmilnika.
V takšnih scenarijih obstaja način, da iz svoje direktive izrecno omenim besedo "Želim dostopati do tega posebnega krmilnika".
Oglejmo si primer, kako lahko to dosežemo.
Event Registration Guru99 Global Event
Razlaga kode:
- Najprej ustvarimo krmilnik, imenovan "DemoController". V tem bomo definirali spremenljivko, imenovano "tutorialName", ki jo bomo tokrat namesto na objekt obsega pritrdili neposredno na krmilnik.
- V naši direktivi po meri posebej omenjamo, da želimo uporabiti krmilnik "DemoController" z uporabo ključne besede parametra krmilnika.
- Sklic na krmilnik ustvarimo s pomočjo parametra "controllerAs". To definira Angular in je način sklicevanja na krmilnik kot referenco.
Opomba: - Do več krmilnikov je mogoče dostopati v direktivi z določitvijo ustreznih blokov krmilnika, krmilnikovA in stavkov predloge.
- Nazadnje v naši predlogi uporabljamo referenco, ustvarjeno v koraku 3, in spremenljivko člana, ki je bila v koraku 1 pritrjena neposredno na krmilnik.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Izhodni podatki jasno kažejo, da direktiva po meri še posebej dostopa do DemoController in spremenljivke člana tutorialName, ki je pritrjena nanjo, in prikazuje besedilo "Angular".
Kako ustvariti direktive za večkratno uporabo
Moč direktiv po meri smo že videli, vendar jo lahko dvignemo na višjo raven z oblikovanjem lastnih direktiv, ki jih je mogoče ponovno uporabiti.
Recimo, na primer, da smo želeli vbrizgati kodo, ki bi vedno prikazala spodnje oznake HTML na več zaslonih, kar je v bistvu le vnos za "Ime" in "starost" uporabnika.
Če želimo to funkcijo ponovno uporabiti na več zaslonih, ne da bi vsakič kodirali, ustvarimo glavni kontrolnik ali direktivo v kotnem položaju, ki zadrži te kontrolnike ("Ime" in "starost" uporabnika).
Torej, namesto da vsakič vnesemo isto kodo za spodnji zaslon, lahko to kodo dejansko vgradimo v direktivo in jo vdelamo kadar koli.
Poglejmo primer, kako lahko to dosežemo.
Event Registration Guru99 Global Event
Razlaga kode:
- V našem delčku kode za direktivo po meri se spremeni le vrednost, ki je dana parametru predloge naše direktive po meri.
Namesto oznake ali besedila načrta pet dejansko vnašamo celoten fragment dveh kontrolnikov za vnos za "Ime" in "starost", ki morata biti prikazana na naši strani.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz zgornjega izhoda lahko vidimo, da se delček kode iz predloge direktive po meri doda na stran.
Direktive in sestavni deli AngularJS - ng-transclude
Kot smo že omenili, naj bi Angular razširil funkcionalnost HTML-ja. In že smo videli, kako lahko vbrizgamo kodo z uporabo smernic za ponovno uporabo po meri.
Toda v sodobnem razvoju spletnih aplikacij obstaja tudi koncept razvoja spletnih komponent. Kar v bistvu pomeni ustvarjanje lastnih oznak HTML, ki se lahko uporabljajo kot sestavni deli naše kode.
Zato angular zagotavlja še eno raven moči razširitve oznak HTML, tako da daje možnost vbrizgavanja atributov v same oznake HTML.
To naredi oznaka " ng-transclude ", ki je nekakšna nastavitev, ki pove, kako zajeti vse, kar je v oznaki vstavljeno v direktivo.
Vzemimo primer, kako lahko to dosežemo.
Event Registration Guru99 Global Event
Angular JS
Razlaga kode:
- Direktivo uporabljamo za definiranje oznake HTML po meri, imenovane 'podokno', in dodajanje funkcije, ki bo dodala nekaj kode po meri za to oznako. V izhodu bo naša oznaka podokna po meri prikazala besedilo "AngularJS" v pravokotniku s trdno črno obrobo.
- Atribut "transclude" je treba omeniti kot true, kar zahteva Angular za vbrizganje te oznake v naš DOM.
- V obsegu definiramo atribut naslova. Atributi so običajno definirani kot pari ime / vrednost, kot so: name = "value". V našem primeru je ime atributa v oznaki HTML podokna "title". Simbol "@" je zahteva od kotne. To se naredi tako, da se ob izvedbi naslova vrstice {{{title}} v 5. koraku koda po meri za atribut naslova doda oznaki HTML podokna.
- Koda po meri za atribute naslova, ki samo črpa trdno črno obrobo za naš nadzor.
- Na koncu pokličemo še našo HTML oznako po meri skupaj z definiranim atributom naslova.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
- Izhod jasno kaže, da je bil atribut naslova oznake html5 podokna nastavljen na vrednost po meri "Angular.JS".
Vgnezdene direktive
Direktive v angular se lahko ugnezdijo. Tako kot samo notranji moduli ali funkcije v katerem koli programskem jeziku, boste morda morali vdelati direktive drug v drugega.
To lahko bolje razumete v spodnjem primeru.
V tem primeru ustvarjamo dve direktivi, imenovani "zunanja" in "notranja".
- Notranja direktiva prikazuje besedilo z imenom "Notranji".
- Medtem ko zunanja direktiva dejansko pokliče notranjo direktivo, da prikaže besedilo, imenovano "Notranji".
Guru99 Global Event