Kaip sukurti „CUSTOM“ direktyvą „AngularJS“ pavyzdyje

Turinys:

Anonim

Kas yra individualizuota direktyva?

Pasirinktinė „Angular Js“ direktyva yra vartotojo apibrėžta direktyva su jūsų norima funkcija. Nepaisant to, kad „AngularJS“ turi daug galingų direktyvų, kartais reikalingos individualios direktyvos.

Šioje pamokoje sužinosite

  • Kaip sukurti pasirinktinę direktyvą?
  • „AngularJs“ direktyvos ir taikymo sritis
  • Valdiklių naudojimas su direktyvomis
  • Kaip sukurti daugkartines direktyvas
  • Kampinės JS direktyvos ir komponentai - ng-transclude
  • Lizdinės direktyvos
  • Įvykių tvarkymas direktyvoje

Kaip sukurti pasirinktinę direktyvą?

Pažvelkime į pavyzdį, kaip galime sukurti pasirinktinę direktyvą.

Mūsų atveju įprasta direktyva paprasčiausiai suleis „div“ žymą, kurios puslapyje bus tekstas „AngularJS Tutorial“, kai iškviečiama direktyva.

Event Registration

Guru99 Global Event

Kodo paaiškinimas:

  1. Pirmiausia kuriame kampinį pritaikymo modulį. Tai reikalinga norint sukurti pasirinktinę direktyvą, nes direktyva bus sukurta naudojant šį modulį.
  2. Dabar mes kuriame pasirinktinę direktyvą, vadinamą „ngGuru“, ir apibrėžiame funkciją, kuri turės pasirinktinį mūsų direktyvos kodą.

Pastaba: -

Atkreipkite dėmesį, kad apibrėždami direktyvą mes ją apibrėžėme kaip „ngGuru“, o raidė „G“ - kaip didelę. Ir kai mes prieiname prie jo iš savo div žymės kaip direktyvos, mes prieiname ją kaip ng-guru. Taip kampinis supranta taikomąsias direktyvas, apibrėžtas programoje. Pirmiausia muitinės direktyvos pavadinimas turėtų prasidėti raidėmis „ng“. Antra, brūkšnelio simbolis „-“ turėtų būti paminėtas tik skambinant direktyvai. Trečia, pirmoji raidė po raidžių „ng“ apibrėžiant direktyvą gali būti mažoji arba didžioji raidė.

  1. Mes naudojame šablono parametrą, kurį „Angular“ apibrėžtas parametras pritaikytoms direktyvoms. Tuo mes apibrėžiame, kad kai tik naudojama ši direktyva, tiesiog naudokite šablono vertę ir įveskite ją į skambinimo kodą.
  2. Dabar mes naudojame savo pasirinktą „ng-guru“ direktyvą. Kai tai padarysime, dabar bus švirkščiama vertė, kurią apibrėžėme šablonui „
    Kampinis JS pamoka
    “.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

  • Pirmiau pateiktas išvestis aiškiai parodo, kad naršyklėje rodoma mūsų pasirinkta „ng-guru“ direktyva, kurios šablonas apibrėžtas rodant pasirinktinį tekstą.

„AngularJs“ direktyvos ir taikymo sritis

Taikymo sritis apibrėžiama kaip klijai, surišantys valdiklį su vaizdu, tvarkant duomenis tarp rodinio ir valdiklio.

Kurdami pasirinktines „AngularJs“ direktyvas, jie pagal numatytuosius nustatymus turės prieigą prie taikymo srities objekto pagrindiniame valdiklyje.

Tokiu būdu pagal direktyvą pagal užsakymą tampa lengva naudotis pagrindiniam valdikliui perduodamais duomenimis.

Pažvelkime į pavyzdį, kaip mes galime naudoti pagrindinio valdiklio sritį savo pritaikytoje direktyvoje.

Event Registration

Guru99 Global Event

Kodo paaiškinimas:

  1. Pirmiausia sukuriame valdiklį, vadinamą „DemoController“. Tuo mes apibrėžiame kintamąjį, vadinamą tutorialName, ir pridedame jį prie srities objekto viename sakinyje - $ scope.tutorialName = "AngularJS".
  2. Mūsų pritaikytoje direktyvoje kintamąjį galime vadinti „tutorialName“, naudodami išraišką. Šis kintamasis būtų prieinamas, nes jis apibrėžtas valdiklyje „DemoController“, kuris taptų šios direktyvos pirminiu.
  3. Mes nurodome valdiklį div žymoje, kuri veiks kaip mūsų pagrindinė div žyma. Atminkite, kad tai reikia padaryti pirmiausia, kad mūsų pasirinktinė direktyva pasiektų kintamąjį tutorialName.
  4. Pagaliau tiesiog pridedame pasirinktinę direktyvą „ng-guru“ prie savo „div“ žymos.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

  • Pirmiau pateiktas išvestis aiškiai parodo, kad mūsų pasirinktinė direktyva „ng-guru“ tėvų valdiklyje naudoja srities kintamąjį tutorialName.

Valdiklių naudojimas su direktyvomis

„Angular“ suteikia galimybę tiesiogiai pasiekti valdiklio nario kintamąjį pagal pasirinktines direktyvas, nereikalaujant taikymo srities objekto.

Tai kartais tampa būtina, nes programoje gali būti keli srities objektai, priklausantys keliems valdikliams.

Taigi yra didelė tikimybė, kad suklysite patekę į netinkamo valdiklio taikymo sritį.

Tokiame scenarijuje yra būdas konkrečiai paminėti sakymą „Noriu prisijungti prie šio konkretaus valdiklio“ iš savo direktyvos.

Pažvelkime į pavyzdį, kaip mes galime tai pasiekti.

Event Registration

Guru99 Global Event

Kodo paaiškinimas:

  1. Pirmiausia sukuriame valdiklį, vadinamą „DemoController“. Čia mes apibrėžsime kintamąjį, vadinamą „tutorialName“, ir šį kartą, užuot prijungę jį prie srities objekto, mes jį tiesiogiai pridėsime prie valdiklio.
  2. Mūsų pritaikytoje direktyvoje mes konkrečiai paminėjame, kad norime naudoti valdiklį „DemoController“, naudodami valdiklio parametro raktinį žodį.
  3. Sukuriame nuorodą į valdiklį naudodami parametrą „controllerAs“. Tai apibrėžia kampinis ir yra būdas nurodyti valdiklį kaip atskaitos tašką.

    Pastaba: - direktyvoje galima pasiekti kelis valdiklius, nurodant atitinkamus valdiklio blokus, valdiklįA ir šablonų sakinius.

  4. Galiausiai šablone naudojame 3 žingsnyje sukurtą nuorodą ir nario kintamąjį, kuris buvo tiesiogiai prijungtas prie valdiklio 1 veiksme.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Išvestis aiškiai parodo, kad pasirinktinė direktyva ypač prieina prie „DemoController“ ir prie jo pridėto nario kintamojo „tutorialName“, ir parodo tekstą „Kampinis“.

Kaip sukurti daugkartines direktyvas

Mes jau matėme galiojančių direktyvų galią, bet galime tai pakelti į kitą lygį kurdami savo pakartotinai naudojamas direktyvas.

Tarkime, pavyzdžiui, norėjome įšvirkšti kodą, kuris visada rodytų žemiau esančias HTML žymas keliuose ekranuose, o tai iš esmės yra tik vartotojo „vardo“ ir „amžiaus“ įvestis.

Norėdami pakartotinai naudoti šią funkciją keliuose ekranuose, kiekvieną kartą neužkoduodami, mes sukuriame pagrindinį valdiklį arba direktyvą kampu, kad galėtume laikyti šiuos valdiklius (vartotojo vardas ir pavardė).

Taigi dabar, užuot kiekvieną kartą įvedę tą patį kodą žemiau esančiame ekrane, mes iš tikrųjų galime įterpti šį kodą į direktyvą ir įterpti tą direktyvą bet kuriuo metu.

Pažiūrėkime pavyzdį, kaip mes galime tai pasiekti.

Event Registration

Guru99 Global Event

Kodo paaiškinimas:

  1. Pasirinktinės direktyvos kodo fragmente keičiama tik ta vertė, kuri suteikiama pasirinktinės direktyvos šablono parametrui.

    Vietoj penkių plano žymos ar teksto mes iš tikrųjų įveskite visą 2 įvesties valdiklių fragmentą „Vardas“ ir „Amžius“, kuriuos reikia parodyti mūsų puslapyje.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Iš pirmiau pateiktos išvesties galime pamatyti, kad kodo fragmentas iš tinkintos direktyvos šablono bus pridėtas prie puslapio.

Kampinės JS direktyvos ir komponentai - ng-transclude

Kaip jau minėjome gana anksčiau, „Angular“ yra skirtas išplėsti HTML funkcionalumą. Mes jau matėme, kaip mes galime įvesti kodą naudodami pritaikytas pakartotinai naudojamas direktyvas.

Tačiau kuriant šiuolaikines žiniatinklio programas taip pat yra žiniatinklio komponentų kūrimo koncepcija. Tai iš esmės reiškia sukurti savo HTML žymas, kurios gali būti naudojamos kaip mūsų kodo komponentai.

Taigi kampinis suteikia dar vieną galią išplėsti HTML žymas suteikdamas galimybę įterpti atributus į pačias HTML žymas.

Tai daro „ ng-transclude “ žyma, kuri yra tam tikras nustatymas, leidžiantis kampuotai užfiksuoti viską, kas dedama direktyvos viduje žymėjime.

Paimkime pavyzdį, kaip mes galime tai pasiekti.

Event Registration

Guru99 Global Event



Angular JS

Kodo paaiškinimas:

  1. Mes naudojame direktyvą norėdami apibrėžti pasirinktinę HTML žymą, vadinamą „pane“, ir pridedame funkciją, kuri įdės tam tikrą šios žymos kodą. Išvestyje mūsų pasirinktinės srities žymoje bus rodomas tekstas „AngularJS“ stačiakampyje su vientisa juoda sienele.
  2. Atributas „transclude“ turi būti paminėtas kaip teisingas, kurio reikalauja kampinis, kad šią žymą įterptų į mūsų DOM.
  3. Taikymo srityje apibrėžiame pavadinimo atributą. Atributai paprastai apibrėžiami kaip pavadinimo / vertės poros, pvz .: name = "value". Mūsų atveju atributo pavadinimas mūsų srities HTML žymoje yra „title“. „@“ Simbolis yra kampinio reikalavimo reikalavimas. Tai daroma todėl, kad atlikus 5 veiksmą eilutės pavadinimas = {{title}}, tinkintas atributo pavadinimas kodas bus pridėtas prie srities HTML žymos.
  4. Pasirinktas pavadinimo atributų kodas, kuris tiesiog nubrėžia tvirtą juodą kraštinę mūsų valdymui.
  5. Galiausiai, mes vadiname savo tinkintą HTML žymą kartu su pavadinimo atributu, kuris buvo apibrėžtas.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

  • Išvestis aiškiai rodo, kad žymos srities html5 pavadinimo atributas buvo nustatytas kaip „Angular.JS“ pasirinktinė vertė.

Lizdinės direktyvos

Gali būti įterptos kampinės direktyvos. Kaip ir tik vidiniai moduliai ar funkcijos bet kuria programavimo kalba, jums gali tekti įterpti direktyvas vienas į kitą.

Tai galite geriau suprasti pamatę žemiau pateiktą pavyzdį.

Šiame pavyzdyje kuriame 2 direktyvas, vadinamas „išorine“ ir „vidine“.

  • Vidinėje direktyvoje rodomas tekstas pavadinimu „Vidinis“.
  • Nors išorinė direktyva iš tikrųjų ragina vidinę direktyvą rodyti tekstą, pavadintą „Vidinis“.



Guru99 Global Event

Kodo paaiškinimas:

  1. Mes kuriame direktyvą, vadinamą „išorine“, kuri elgsis kaip mūsų pagrindinė direktyva. Ši direktyva paskambins į „vidinę“ direktyvą.
  2. Apribojimas: „E“ reikalauja kampinis, kad būtų užtikrinta, jog vidinės direktyvos duomenys būtų prieinami išorinei direktyvai. Raidė „E“ yra trumpa žodžio „Element“ forma.
  3. Čia kuriame vidinę direktyvą, kurioje tekstas „Vidinis“ rodomas „div“ žymoje.
  4. Išorinės direktyvos šablone (4 žingsnis) mes vadiname vidinę direktyvą. Taigi čia mes švirkščiame šabloną iš vidinės direktyvos į išorinę direktyvą.
  5. Galiausiai mes tiesiogiai raginame išorinę direktyvą.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Iš išvesties

  • Galima pastebėti, kad buvo iškviesti tiek išoriniai, tiek vidiniai nurodymai, o abiejose „div“ žymose rodomas tekstas.

Įvykių tvarkymas direktyvoje

Tokius pelės ar mygtuko paspaudimus galima valdyti pačiose direktyvose. Tai atliekama naudojant nuorodos funkciją. Nuorodos funkcija leidžia direktyvai prisijungti prie DOM elementų HTML puslapyje.

Sintaksė:

Nuorodos elemento sintaksė yra tokia, kaip parodyta žemiau

ng-pakartoti

link: function ($scope, element, attrs)

Nuorodos funkcija paprastai priima 3 parametrus, įskaitant taikymo sritį, elementą, su kuriuo susieta direktyva, ir tikslinio elemento atributus.

Pažvelkime į pavyzdį, kaip mes galime tai pasiekti.

Event Registration

Guru99 Global Event


Click Me

Kodo paaiškinimas:

  1. Mes naudojame nuorodų funkciją, kaip apibrėžta kampu, kad suteiktų direktyvų galimybę pasiekti įvykius HTML DOM.
  2. Mes naudojame raktinį žodį „elementas“, nes norime atsakyti į HTML DOM elemento įvykį, kuris mūsų atveju bus elementas „div“. Tada mes naudojame funkciją „įrišti“ ir sakome, kad norime pridėti pasirinktinę funkciją prie elemento paspaudimo įvykio. Žodis „spustelėkite“ yra raktinis žodis, naudojamas žymėti bet kurio HTML valdiklio paspaudimo įvykį. Pavyzdžiui, HTML mygtuko valdiklyje yra paspaudimo įvykis. Kadangi savo pavyzdyje norime pridėti pasirinktinį kodą prie žymos „dev“ paspaudimo įvykio, naudojame raktinį žodį „spustelėkite“.
  3. Čia sakome, kad norime vidinį elemento HTML (mūsų atveju - div elementą) pakeisti tekstu „Jūs spustelėjote mane!“.
  4. Čia mes apibrėžiame savo „div“ žymą, kad galėtume naudoti „ng-guru“ pasirinktinę direktyvą.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

  • Iš pradžių vartotojui bus rodomas tekstas „Spustelėkite mane“, nes tai buvo iš pradžių apibrėžta žymoje „div“. Kai iš tikrųjų spustelėsite „div“ žymą, bus rodoma žemiau išvesta išvestis

Santrauka

  • Taip pat galima sukurti pasirinktinę direktyvą, kuri gali būti naudojama įvedant kodą pagrindinėje kampinėje programoje.
  • Naudojant „Controller“, „controllerAs“ ir „template“ raktinius žodžius, tam tikro valdiklio nariams, apibrėžtiems taikymo srities objekte, galima parengti pasirinktines direktyvas.
  • Direktyvos taip pat gali būti įdėtos įterpiant funkciją, kurios gali prireikti atsižvelgiant į programos poreikį.
  • Taip pat direktyvas galima padaryti pakartotinai naudojamomis, kad jas būtų galima naudoti norint įvesti bendrą kodą, kurio gali prireikti įvairiose interneto programose.
  • Direktyvos taip pat gali būti naudojamos kuriant pasirinktines HTML žymas, kurios turėtų savo funkcijas, apibrėžtas pagal verslo reikalavimus.
  • Įvykius taip pat galima tvarkyti iš direktyvų, kad būtų galima tvarkyti DOM įvykius, pvz., Mygtuko ir pelės paspaudimus.