Kohandatud direktiivid AngularJS-is: kuidas luua? [Näited]
James Hartman
Mis on tollidirektiiv?
A tollidirektiiv AngularJS-is on kasutaja määratletud direktiiv, mis võimaldab kasutajatel kasutada soovitud funktsioone HTML-i funktsionaalsuse laiendamiseks. Seda saab määratleda funktsiooni "direktiiv" abil ja see asendab elemendi, mille jaoks seda kasutatakse. Kuigi AngularJS-il on palju võimsaid direktiive, on mõnikord vaja kohandatud direktiive.
Kuidas luua kohandatud direktiivi?
Vaatame näidet, kuidas saame luua AngularJS-i kohandatud direktiivi.
Meie puhul mõeldud kohandatud direktiiv sisestab meie lehel lihtsalt div-märgendi, millel on direktiivi kutsumisel tekst „AngularJS Tutorial”.
<!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>
Koodi selgitus
- Esmalt loome a moodul meie nurkrakenduse jaoks. See on vajalik kohandatud direktiivi loomiseks, kuna direktiiv luuakse selle mooduli abil.
- Loome nüüd kohandatud direktiivi nimega "ngGuru" ja määratleme funktsiooni, millel on meie direktiivi jaoks kohandatud kood.Märkus: - Pange tähele, et direktiivi määratlemisel oleme defineerinud selle ngGuruna, mille suurtäht on "G". Ja kui me pääseme sellele ligi oma div-sildi kaudu kui direktiivi, pääseme sellele juurde ng-guruna. Nii mõistab angular rakenduses määratletud kohandatud direktiive. Esiteks peaks tollidirektiivi nimi algama tähtedega ng. Teiseks tuleks sidekriipsu sümbolit "-" mainida ainult direktiivi kutsumisel. Ja kolmandaks võib direktiivi määratlemisel ng-tähtedele järgnev esimene täht olla kas väike- või suurtäht.
- Kasutame malli parameetrit, mis on Angulari kohandatud direktiivide jaoks määratletud parameeter. Selles määratleme, et kui seda direktiivi kasutatakse, kasutage lihtsalt malli väärtust ja sisestage see kutsuvasse koodi.
- Siin kasutame nüüd oma kohandatud "ng-guru" direktiivi. Kui me seda teeme, siis meie malli jaoks määratletud väärtus " Nurga JS-i õpetus ” süstitakse nüüd siia.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Ülaltoodud väljund näitab selgelt, et meie kohandatud ng-guru direktiiv, millel on kohandatud teksti kuvamiseks määratud mall, kuvatakse brauseris.
AngularJs direktiivid ja ulatus
Ulatus on määratletud kui liim, mis seob kontrolleri vaatega, haldades andmeid vaate ja kontrolleri vahel.
Kohandatud AngularJs direktiivide loomisel on neil vaikimisi juurdepääs ülemkontrolleri ulatuse objektile.
Nii on kohandatud direktiivil lihtne põhikontrollerile edastatavaid andmeid kasutada.
Vaatame AngularJS-i kohandatud direktiivi näidet selle kohta, kuidas saame oma kohandatud direktiivis kasutada vanemkontrolleri ulatust.
<!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>
Koodi selgitus
- Esmalt loome kontrolleri nimega "DemoController". Selles defineerime muutuja nimega tutorialName ja lisame selle ühe lausega ulatuse objektile – $scope.tutorialName = “AngularJS”.
- Meie kohandatud direktiivis saame muutujat "tutorialName" kutsuda avaldise abil. See muutuja oleks juurdepääsetav, kuna see on määratletud kontrolleris "DemoController", millest saaks selle direktiivi ema.
- Viitame kontrollerile div-märgendis, mis toimib meie div ülemsildina. Pange tähele, et seda tuleb kõigepealt teha, et meie kohandatud direktiiv pääseks juurde muutujale tutorialName.
- Lõpuks lisame oma div-sildile lihtsalt kohandatud direktiivi "ng-guru".
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Ülaltoodud väljund näitab selgelt, et meie kohandatud direktiiv "ng-guru" kasutab ülemkontrolleris ulatuse muutujat tutorialName.
Kontrollerite kasutamine koos käskkirjadega
Angular annab võimaluse pääseda kontrolleri liikme muutujale otse kohandatud direktiividest ilma ulatusobjekti vajaduseta.
See muutub mõnikord vajalikuks, kuna rakenduses võib olla mitu ulatusobjekti, mis kuuluvad mitmele kontrollerile.
Seega on suur tõenäosus, et võite teha vea, kui pääsete juurde vale kontrolleri ulatusobjektile.
Selliste stsenaariumide puhul on võimalik oma direktiivis konkreetselt mainida, et "ma tahan sellele konkreetsele kontrollerile juurde pääseda".
Vaatame näidet selle kohta, kuidas seda saavutada.
<!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>
Koodi selgitus
- Esmalt loome kontrolleri nimega "DemoController". Selles defineerime muutuja nimega "tutorialName" ja seekord selle asemel, et lisada see ulatuse objektile, ühendame selle otse kontrolleriga.
- Oma kohandatud direktiivis mainime konkreetselt, et tahame kasutada kontrollerit "DemoController", kasutades kontrolleri parameetri märksõna.
- Loome kontrollerile viite, kasutades parameetrit “controllerAs”. Selle defineerib Angular ja see on viis kontrolleri viitamiseks viitena.
- Lõpuks kasutame oma mallis 3. sammus loodud viidet ja liikmemuutujat, mis 1. sammus otse kontrolleri külge kinnitati.
Märge: -Ühes direktiivis on võimalik juurde pääseda mitmele kontrollerile, määrates vastavad kontrolleri plokid, kontrollerAs ja mallilaused.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Väljund näitab selgelt, et kohandatud direktiiv pääseb eriti juurde DemoControllerile ja sellele lisatud liikmemuutujale tutorialName ning kuvab teksti "Angular".
Kuidas luua korduvkasutatavaid direktiive
Nägime juba kohandatud direktiivide jõudu, kuid saame selle viia järgmisele tasemele, koostades oma korduvkasutatavad direktiivid.
Oletame näiteks, et soovisime sisestada koodi, mis kuvaks alati mitmel ekraanil allolevaid HTML-märgendeid, mis on põhimõtteliselt lihtsalt kasutaja nime ja vanuse sisend.
Selle funktsiooni taaskasutamiseks mitmel ekraanil ilma iga kord kodeerimata loome nende juhtelementide (kasutaja nimi ja vanus) hoidmiseks nurga all põhijuhtelemendi või -juhise.
Nii et nüüd, selle asemel, et sisestada allolevale ekraanile iga kord sama kood, saame tegelikult selle koodi käskkirja manustada ja selle direktiivi igal ajal manustada.
Vaatame näidet, kuidas seda saavutada.
<!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: ' Name <input type="text"><br><br> Age<input type="text">'
};
});
</script>
</body>
</html>
Koodi selgitus
- Meie kohandatud direktiivi koodilõigu puhul muutub ainult väärtus, mis antakse meie kohandatud direktiivi malli parameetrile. Viie plaani märgendi või teksti asemel sisestame tegelikult kogu 2 sisendjuhtelemendi fragmendi " Nimi" ja "vanus", mis tuleb meie lehel näidata.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Ülaltoodud väljundist näeme, et lehele lisatakse kohandatud direktiivi malli koodilõik.
AngularJS direktiivid ja komponendid – ng-transclude
Nagu juba varem mainisime, on Angular mõeldud selle funktsionaalsuse laiendamiseks HTML. Ja oleme juba näinud, kuidas saab kohandatud korduvkasutatavate direktiivide abil koodi sisestada.
Kuid kaasaegses veebirakenduste arenduses on ka veebikomponentide arendamise kontseptsioon. Mis põhimõtteliselt tähendab oma HTML-i siltide loomist, mida saab meie koodi komponentidena kasutada.
Seega annab angular HTML-märgendite laiendamiseks veel ühe võimsuse, võimaldades atribuute sisestada HTML-märgenditesse.
Seda teeb "ng-transclude” märgend, mis on omamoodi seadistus, mis kästab angularil jäädvustada kõike, mis märgistuses on direktiivi sisse pandud.
Toome näite, kuidas seda saavutada.
<!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>
Koodi selgitus
- Me kasutame direktiivi, et määratleda kohandatud HTML-märgendi nimega "paan" ja lisada funktsioon, mis lisab sellele märgendile kohandatud koodi. Väljundis kuvab meie kohandatud paanimärgend teksti "AngularJS" ristkülikuna, millel on kindel must ääris.
- Atribuut "transclude" tuleb mainida tõena, mida angular nõuab selle sildi sisestamiseks meie DOM-i.
- Ulatuses määratleme tiitliatribuudi. Atribuudid määratletakse tavaliselt nime/väärtuse paaridena, näiteks: nimi = "väärtus". Meie puhul on meie paani HTML-i märgendi atribuudi nimi "title". „@” sümbol on nurga nõue. Seda tehakse nii, et kui 5. sammus käivitatakse rida title={{title}}, lisatakse paani HTML-i märgendile pealkirja atribuudi kohandatud kood.
- Pealkirja atribuutide kohandatud kood, mis lihtsalt tõmbab meie kontrolli jaoks kindla musta äärise.
- Lõpuks kutsume oma kohandatud HTML-märgendit koos määratletud pealkirja atribuudiga.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
- Väljund näitab selgelt, et paani html5 märgendi title atribuut on seatud kohandatud väärtusele „Angular.JS”.
Pesastatud direktiivid
AngularJS-i direktiive saab pesastada. Nagu lihtsalt sisemised moodulid või funktsioonid mis tahes programmeerimiskeel, peate võib-olla käskkirjad üksteise sisse põimima.
Saate sellest paremini aru saada, vaadates allolevat näidet.
Selles näites loome 2 direktiivi, mida nimetatakse väliseks ja sisemiseks.
- Sisemine direktiiv kuvab teksti nimega "Sisemine".
- Kuigi väline direktiiv kutsub tegelikult sisemist direktiivi, et kuvada tekst nimega "Sisemine".
</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>
Koodi selgitus
- Loome direktiivi nimega "välimine", mis toimib kui meie põhidirektiiv. See direktiiv kutsub seejärel üles "sisemisele" direktiivile.
- Piirang: E on nõutav nurga all, et tagada sisemise direktiivi andmete kättesaadavus välisele direktiivile. Täht "E" on sõna "element" lühike vorm.
- Siin loome sisemise direktiivi, mis kuvab div-sildis teksti "Inner".
- Välise direktiivi mallis (samm nr 4) kutsume sisemist direktiivi. Nii et siin sisestame malli sisemisest direktiivist välimisse.
- Lõpuks kutsume me otse välja välisdirektiivi.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Väljundist,
- On näha, et välja on kutsutud nii välimine kui ka sisemine direktiiv ning kuvatakse mõlema div sildi tekst.
Sündmuste käsitlemine käskkirjas
Sündmused selliseid hiireklõpse või nupuklõpse saab hallata direktiivide endi sees. Seda tehakse linki funktsiooni abil. Linkimisfunktsioon võimaldab direktiivil end siduda HTML-lehe DOM-elementidega.
süntaksit:
Lingielemendi süntaks on selline, nagu allpool näidatud
link: function ($scope, element, attrs)
Linkimisfunktsioon aktsepteerib tavaliselt 3 parameetrit, sealhulgas ulatust, elementi, millega direktiiv on seotud, ja sihtelemendi atribuute.
Vaatame näidet selle kohta, kuidas seda saavutada.
<!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>
Koodi selgitus
- Kasutame nurgas määratletud linkimisfunktsiooni, et anda direktiividele juurdepääs sündmustele HTML DOM-is.
- Kasutame märksõna „element”, kuna tahame vastata HTML-i DOM-elemendi sündmusele, mis meie puhul on „div”. Seejärel kasutame funktsiooni "sidumine" ja ütleme, et tahame elemendi klõpsamissündmusele kohandatud funktsioone lisada. Sõna „klõps” on märksõna, mida kasutatakse mis tahes HTML-i juhtelemendi klõpsusündmuse tähistamiseks. Näiteks HTML-nupu juhtelemendil on klõpsusündmus. Kuna meie näites tahame lisada kohandatud koodi meie märgendi "dev" klikisündmusele, kasutame märksõna "click".
- Siin me ütleme, et tahame elemendi sisemise HTML-i (meie puhul div elemendi) asendada tekstiga "Sa klõpsasid mind!".
- Siin määratleme oma div-märgendi, et kasutada ng-guru kohandatud direktiivi.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
- Algselt kuvatakse kasutajale tekst „Klõpsa mind”, kuna see on algselt märgendis div määratletud. Kui klõpsate tegelikult div-sildil, kuvatakse allolev väljund
kokkuvõte
- Samuti saab luua kohandatud direktiivi, mida saab kasutada koodi sisestamiseks peamises nurgarakenduses.
- Kohandatud direktiive saab panna teatud kontrolleri ulatusobjektis määratletud liikmete kutsumiseks, kasutades märksõnu 'Controller', 'controllerAs' ja 'template'.
- Direktiive saab ka pesastada, et pakkuda manustatud funktsioone, mis võivad olenevalt rakenduse vajadusest olla vajalikud.
- Direktiive saab teha ka korduvkasutatavaks, et neid saaks kasutada ühise koodi sisestamiseks, mis võib olla vajalik erinevates veebirakendustes.
- Direktiive saab kasutada ka kohandatud HTML-märgendite loomiseks, millel oleks oma funktsionaalsus vastavalt ärinõuetele.
- Sündmusi saab hallata ka direktiivide sees, et käsitleda DOM-i sündmusi, nagu nupu- ja hiireklõpsud.
