CUSTOM-direktiver i AngularJS: Hvordan lage? [Eksempler]
James Hartman
Hva er tilpasset direktiv?
A Tilpasset direktiv i AngularJS er et brukerdefinert direktiv som gir brukere mulighet til å bruke ønskede funksjoner for å utvide HTML-funksjonaliteten. Den kan defineres ved å bruke "direktiv"-funksjonen, og den erstatter elementet den brukes til. Selv om AngularJS har mange kraftige direktiver ut av esken, kreves det noen ganger tilpassede direktiver.
Hvordan lage et tilpasset direktiv?
La oss ta en titt på et eksempel på hvordan vi kan lage et tilpasset AngularJS-direktiv.
Det tilpassede direktivet i vårt tilfelle kommer ganske enkelt til å injisere en div-tag som har teksten "AngularJS Tutorial" på siden vår når direktivet kalles.
<!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>
Kode Forklaring
- Vi lager først en moduler for vår vinkelapplikasjon. Dette er nødvendig for å lage et tilpasset direktiv fordi direktivet vil bli opprettet ved hjelp av denne modulen.
- Vi lager nå et tilpasset direktiv kalt "ngGuru" og definerer en funksjon som vil ha tilpasset kode for vårt direktiv.Merk: - Merk at når vi definerer direktivet, har vi definert det som ngGuru med bokstaven 'G' som stor. Og når vi får tilgang til det fra vår div-tag som et direktiv, får vi tilgang til det som ng-guru. Dette er hvordan angular forstår tilpassede direktiver definert i en applikasjon. Først bør navnet på det tilpassede direktivet starte med bokstavene 'ng'. For det andre skal bindestreksymbolet '-' bare nevnes når direktivet kalles. Og for det tredje kan den første bokstaven etter bokstavene 'ng' når direktivet defineres enten være små eller store.
- Vi bruker malparameteren som er en parameter definert av Angular for tilpassede direktiver. I dette definerer vi at når dette direktivet brukes, så bare bruk verdien av malen og injiser den i anropskoden.
- Her bruker vi nå vårt spesiallagde "ng-guru"-direktiv. Når vi gjør dette, vil verdien vi definerte for malen vår " Angular JS veiledning ” vil nå bli injisert her.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Utdataene ovenfor viser tydelig at vårt tilpassede ng-guru-direktiv, som har malen definert for å vise en tilpasset tekst, vises i nettleseren.
AngularJs direktiver og omfang
Omfanget er definert som limet som binder kontrolleren til visningen ved å administrere dataene mellom visningen og kontrolleren.
Når du oppretter tilpassede AngularJs-direktiver, vil de som standard ha tilgang til scope-objektet i den overordnede kontrolleren.
På denne måten blir det enkelt for spesialdirektivet å gjøre bruk av dataene som sendes til hovedkontrolløren.
La oss se på et AngularJS tilpasset direktiv eksempel på hvordan vi kan bruke omfanget til en overordnet kontroller i vårt tilpassede direktiv.
<!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>
Kode Forklaring
- Vi lager først en kontroller kalt "DemoController". I dette definerer vi en variabel kalt tutorialName og fester den til scope-objektet i en setning – $scope.tutorialName = “AngularJS”.
- I vårt tilpassede direktiv kan vi kalle variabelen "tutorialName" ved å bruke et uttrykk. Denne variabelen vil være tilgjengelig fordi den er definert i kontrolleren "DemoController", som vil bli overordnet for dette direktivet.
- Vi refererer til kontrolleren i en div-tag, som vil fungere som vår overordnede div-tag. Merk at dette må gjøres først for at vårt egendefinerte direktiv skal få tilgang til tutorialName-variabelen.
- Vi legger til slutt bare vårt tilpassede direktiv "ng-guru" til div-taggen vår.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Ovennevnte utdata viser tydelig at vårt tilpassede direktiv "ng-guru" bruker omfangsvariabelen tutorialName i foreldrekontrolleren.
Bruke kontrollere med direktiver
Angular gir anlegget til få tilgang til kontrollerens medlemsvariabel direkte fra tilpassede direktiver uten behov for omfangsobjektet.
Dette blir nødvendig til tider fordi du i en applikasjon kan ha flere scope-objekter som tilhører flere kontrollere.
Så det er stor sjanse for at du kan gjøre feilen med å få tilgang til scope-objektet til feil kontroller.
I slike scenarier er det en måte å spesifikt nevne å si "Jeg vil ha tilgang til denne spesifikke kontrolleren" fra direktivet mitt.
La oss ta en titt på et eksempel på hvordan vi kan oppnå dette.
<!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>
Kode Forklaring
- Vi lager først en kontroller kalt "DemoController". I dette vil vi definere en variabel kalt "tutorialName", og denne gangen i stedet for å knytte den til scope-objektet, vil vi knytte den direkte til kontrolleren.
- I vårt tilpassede direktiv nevner vi spesifikt at vi ønsker å bruke kontrolleren "DemoController" ved å bruke nøkkelordet for kontrollerparameter.
- Vi oppretter en referanse til kontrolleren ved å bruke parameteren "controllerAs". Dette er definert av Angular og er måten å referere kontrolleren som en referanse.
- Til slutt, i malen vår, bruker vi referansen opprettet i trinn 3 og bruker medlemsvariabelen som ble koblet direkte til kontrolleren i trinn 1.
Merk: -Det er mulig å få tilgang til flere kontrollere i et direktiv ved å spesifisere respektive blokker av kontrolleren, controllerAs og malsetninger.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Utdataene viser tydelig at det tilpassede direktivet spesielt har tilgang til DemoController og medlemsvariabelen tutorialName som er knyttet til den, og viser teksten "Angular".
Hvordan lage gjenbrukbare direktiver
Vi har allerede sett kraften i tilpassede direktiver, men vi kan ta det til neste nivå ved å bygge våre egne gjenbrukbare direktiver.
La oss for eksempel si at vi ønsket å injisere kode som alltid ville vise HTML-taggene nedenfor på tvers av flere skjermer, som i utgangspunktet bare er en inngang for "navnet" og "alderen" til brukeren.
For å gjenbruke denne funksjonen på flere skjermer uten koding hver gang, lager vi en hovedkontroll eller et direktiv i vinkel for å holde disse kontrollene ("navn" og "alder" til brukeren).
Så nå, i stedet for å skrive inn den samme koden for skjermen nedenfor hver gang, kan vi faktisk legge inn denne koden i et direktiv og legge inn det direktivet når som helst.
La oss se et eksempel på hvordan vi kan oppnå dette.
<!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>
Kode Forklaring
- I kodebiten vår for et tilpasset direktiv er det som endres bare verdien som er gitt til malparameteren i det tilpassede direktivet. I stedet for en plan fem-tag eller tekst, legger vi faktisk inn hele fragmentet av 2 inngangskontroller for " Navn" og "alder" som må vises på siden vår.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utdataene ovenfor kan vi se at kodebiten fra malen til det tilpassede direktivet blir lagt til siden.
AngularJS-direktiver og komponenter – ng-transclude
Som vi nevnte ganske tidligere, er Angular ment å utvide funksjonaliteten til HTML. Og vi har allerede sett hvordan vi kan ha kodeinjeksjon ved å bruke tilpassede gjenbrukbare direktiver.
Men i moderne webapplikasjonsutvikling er det også et konsept med å utvikle webkomponenter. Som i utgangspunktet betyr å lage våre egne HTML-tagger som kan brukes som komponenter i koden vår.
Derfor gir angular et annet kraftnivå til å utvide HTML-tagger ved å gi muligheten til å injisere attributter i selve HTML-taggene.
Dette gjøres av "ng-transkludere” tag, som er en slags innstilling for å fortelle angular å fange opp alt som er satt inne i direktivet i markeringen.
La oss ta et eksempel på hvordan vi kan oppnå dette.
<!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>
Kode Forklaring
- Vi bruker direktivet til å definere en egendefinert HTML-tag kalt 'panel' og legger til en funksjon som vil sette inn en egendefinert kode for denne taggen. I utdataene kommer vår egendefinerte rutekode til å vise teksten "AngularJS" i et rektangel med en solid svart kant.
- "transclude"-attributtet må nevnes som sant, noe som kreves av angular for å injisere denne taggen i DOM-en vår.
- I omfanget definerer vi et tittelattributt. Attributter er normalt definert som navn/verdi-par som: navn=”verdi”. I vårt tilfelle er navnet på attributtet i HTML-koden for ruten vår "tittel". "@"-symbolet er kravet fra vinkel. Dette gjøres slik at når linjen title={{title}} kjøres i trinn 5, blir den tilpassede koden for tittelattributtet lagt til i rutens HTML-tag.
- Den tilpassede koden for tittelattributtene som bare tegner en solid svart kant for vår kontroll.
- Til slutt kaller vi vår egendefinerte HTML-tag sammen med tittelattributtet som ble definert.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
- Utdataene viser tydelig at tittelattributtet til rutens html5-taggen er satt til den egendefinerte verdien "Angular.JS".
Nestede direktiver
Direktiver i AngularJS kan nestes. Som bare indre moduler eller funksjoner i noen programmeringsspråk, kan det hende du må bygge inn direktiver i hverandre.
Du kan få en bedre forståelse av dette ved å se eksemplet nedenfor.
I dette eksemplet lager vi 2 direktiver kalt "ytre" og "indre".
- Det indre direktivet viser en tekst kalt "Indre".
- Mens det ytre direktivet faktisk kaller det indre direktivet for å vise teksten kalt "Indre".
</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>
Kode Forklaring
- Vi lager et direktiv kalt "ytre" som vil oppføre seg som vårt overordnede direktiv. Dette direktivet vil da ringe til det "indre" direktivet.
- Begrensningen: 'E' kreves av vinkel for å sikre at dataene fra det indre direktivet er tilgjengelige for det ytre direktivet. Bokstaven 'E' er den korte formen av ordet 'Element'.
- Her lager vi det indre direktivet som viser teksten "Inner" i en div-tag.
- I malen for det ytre direktivet (trinn #4) kaller vi det indre direktivet. Så her over injiserer vi malen fra det indre direktivet til det ytre direktivet.
- Til slutt kaller vi direkte ut det ytre direktivet.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utgangen,
- Det kan ses at både ytre og indre direktiver har blitt kalt, og teksten i begge div-taggene vises.
Håndtering av hendelser i et direktiv
Aktiviteter slike museklikk eller knappeklikk kan håndteres fra selve direktivene. Dette gjøres ved hjelp av lenkefunksjonen. Koblingsfunksjonen er det som lar direktivet knytte seg til DOM-elementene på en HTML-side.
Syntaks:
Syntaksen til lenkeelementet er som vist nedenfor
link: function ($scope, element, attrs)
Koblingsfunksjonen godtar normalt 3 parametere inkludert omfanget, elementet som direktivet er assosiert med og attributtene til målelementet.
La oss se på et eksempel på hvordan vi kan oppnå dette.
<!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>
Kode Forklaring
- Vi bruker lenkefunksjonen som definert i vinkel for å gi direktivene muligheten til å få tilgang til hendelser i HTML DOM.
- Vi bruker nøkkelordet "element" fordi vi ønsker å svare på en hendelse for et HTML DOM-element, som i vårt tilfelle vil være "div"-elementet. Vi bruker da "bind"-funksjonen og sier at vi ønsker å legge til tilpasset funksjonalitet til klikkhendelsen til elementet. "Klikk"-ordet er nøkkelordet, som brukes til å angi klikkhendelsen til en HTML-kontroll. HTML-knappkontrollen har for eksempel klikkhendelsen. Siden vi i vårt eksempel ønsker å legge til en egendefinert kode til klikkhendelsen til «dev»-taggen vår, bruker vi «click»-nøkkelordet.
- Her sier vi at vi ønsker å erstatte elementets indre HTML (i vårt tilfelle div-elementet) med teksten 'Du klikket meg!'.
- Her definerer vi vår div-tag for å bruke det tilpassede ng-guru-direktivet.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
- Til å begynne med vil teksten "Klikk meg" vises til brukeren fordi dette er det som opprinnelig ble definert i div-taggen. Når du faktisk klikker på div-taggen, vil utdataene nedenfor vises
Sammendrag
- Man kan også lage et tilpasset direktiv som kan brukes til å injisere kode i hovedvinkelapplikasjonen.
- Egendefinerte direktiver kan lages for å kalle medlemmer definert i scope-objektet i en bestemt kontroller ved å bruke nøkkelordene 'Controller', 'controllerAs' og 'template'.
- Direktiver kan også nestes for å gi innebygd funksjonalitet som kan være nødvendig avhengig av applikasjonens behov.
- Direktiver kan også gjøres gjenbrukbare slik at de kan brukes til å injisere felles kode som kan kreves på tvers av ulike nettapplikasjoner.
- Direktiv kan også brukes til å lage tilpassede HTML-koder som vil ha sin egen funksjonalitet definert i henhold til forretningskravet.
- Hendelser kan også håndteres fra direktiver for å håndtere DOM-hendelser som knapp- og museklikk.
