Anpassade direktiv i AngularJS: Hur skapar man? [Exempel]
James Hartman
Vad är anpassat direktiv?
A Anpassat direktiv i AngularJS är ett användardefinierat direktiv som ger användare att använda önskade funktioner för att utöka HTML-funktionaliteten. Det kan definieras genom att använda funktionen "direktiv", och det ersätter elementet som det används för. Även om AngularJS har många kraftfulla direktiv ur lådan, krävs ibland anpassade direktiv.
Hur skapar man ett anpassat direktiv?
Låt oss ta en titt på ett exempel på hur vi kan skapa ett anpassat AngularJS-direktiv.
Det anpassade direktivet i vårt fall kommer helt enkelt att injicera en div-tagg som har texten "AngularJS Tutorial" på vår sida när direktivet anropas.
<!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>
Kodförklaring
- Vi skapar först en modul för vår vinkelapplikation. Detta krävs för att skapa ett anpassat direktiv eftersom direktivet kommer att skapas med den här modulen.
- Vi skapar nu ett anpassat direktiv som heter "ngGuru" och definierar en funktion som kommer att ha anpassad kod för vårt direktiv.Observera: - Observera att när vi definierar direktivet har vi definierat det som ngGuru med bokstaven 'G' som stor. Och när vi kommer åt det från vår div-tagg som ett direktiv, kommer vi åt det som ng-guru. Detta är hur angular förstår anpassade direktiv definierade i en applikation. Först bör namnet på det anpassade direktivet börja med bokstäverna 'ng'. För det andra bör bindestrecket '-' endast nämnas när direktivet anropas. Och för det tredje kan den första bokstaven efter bokstäverna "ng" när direktivet definieras vara antingen liten eller stor.
- Vi använder mallparametern som är en parameter definierad av Angular för anpassade direktiv. I detta definierar vi att närhelst detta direktiv används, använd bara värdet på mallen och injicera det i anropskoden.
- Här använder vi nu vårt skräddarsydda "ng-guru"-direktiv. När vi gör detta, värdet vi definierade för vår mall " Angular JS handledning ” kommer nu att injiceras här.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Ovanstående utdata visar tydligt att vårt anpassade ng-guru-direktiv, som har mallen definierad för att visa en anpassad text, visas i webbläsaren.
AngularJs direktiv och tillämpningsområde
Omfattningen definieras som det lim som binder regulatorn till vyn genom att hantera data mellan vyn och kontrollanten.
När du skapar anpassade AngularJs-direktiv kommer de som standard att ha tillgång till scope-objektet i den överordnade kontrollern.
På så sätt blir det enkelt för det anpassade direktivet att använda sig av de uppgifter som skickas till huvudkontrollanten.
Låt oss titta på ett AngularJS anpassat direktiv exempel på hur vi kan använda omfattningen av en föräldrakontroller i vårt anpassade 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>
Kodförklaring
- Vi skapar först en kontroller som heter "DemoController". I detta definierar vi en variabel som heter tutorialName och bifogar den till scope-objektet i en sats – $scope.tutorialName = “AngularJS”.
- I vårt anpassade direktiv kan vi kalla variabeln "tutorialName" genom att använda ett uttryck. Denna variabel skulle vara tillgänglig eftersom den är definierad i styrenheten "DemoController", som skulle bli överordnad för detta direktiv.
- Vi refererar till regulatorn i en div-tagg, som kommer att fungera som vår överordnade div-tagg. Observera att detta måste göras först för att vårt anpassade direktiv ska få tillgång till variabeln tutorialName.
- Vi bifogar äntligen bara vårt anpassade direktiv "ng-guru" till vår div-tagg.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Ovanstående utdata visar tydligt att vårt anpassade direktiv "ng-guru" använder sig av scope-variabeln tutorialName i föräldrakontrollern.
Använda kontroller med direktiv
Angular ger möjlighet att få tillgång till styrenhetens medlemsvariabel direkt från anpassade direktiv utan behov av räckviddsobjektet.
Detta blir nödvändigt ibland eftersom du i en applikation kan ha flera scope-objekt som tillhör flera kontroller.
Så det finns en stor chans att du kan göra misstaget att komma åt scope-objektet för fel kontroller.
I sådana scenarier finns det ett sätt att specifikt nämna att säga "Jag vill komma åt den här specifika styrenheten" från mitt direktiv.
Låt oss ta en titt på ett exempel på hur vi kan uppnå detta.
<!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>
Kodförklaring
- Vi skapar först en kontroller som heter "DemoController". I detta kommer vi att definiera en variabel som heter "tutorialName" och den här gången istället för att koppla den till scope-objektet, kommer vi att koppla den direkt till kontrollern.
- I vårt anpassade direktiv nämner vi specifikt att vi vill använda styrenheten "DemoController" genom att använda nyckelordet för controllerparametern.
- Vi skapar en referens till regulatorn med hjälp av parametern "controllerAs". Detta definieras av Angular och är sättet att referera till regulatorn som en referens.
- Slutligen, i vår mall, använder vi referensen som skapades i steg 3 och använder medlemsvariabeln som kopplades direkt till regulatorn i steg 1.
Notera: -Det är möjligt att komma åt flera styrenheter i ett direktiv genom att specificera respektive block av styrenheten, controllerAs och mallsatser.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Utgången visar tydligt att det anpassade direktivet särskilt kommer åt DemoController och medlemsvariabeln tutorialName som är kopplad till den och visar texten "Angular".
Hur man skapar återanvändbara direktiv
Vi har redan sett kraften med anpassade direktiv, men vi kan ta det till nästa nivå genom att bygga våra egna återanvändbara direktiv.
Låt oss till exempel säga att vi ville injicera kod som alltid skulle visa HTML-taggarna nedan på flera skärmar, vilket i princip bara är en inmatning för användarens "namn" och "ålder".
För att återanvända den här funktionen på flera skärmar utan kodning varje gång, skapar vi en huvudkontroll eller ett direktiv i vinkel för att hålla dessa kontroller ("namn" och "ålder" på användaren).
Så nu, istället för att ange samma kod för skärmen nedan varje gång, kan vi faktiskt bädda in den här koden i ett direktiv och bädda in det direktivet när som helst.
Låt oss se ett exempel på hur vi kan uppnå detta.
<!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>
Kodförklaring
- I vårt kodavsnitt för ett anpassat direktiv är det som ändras bara värdet som ges till mallparametern i vårt anpassade direktiv. Istället för en plan fem-tagg eller text, anger vi faktiskt hela fragmentet av 2 inmatningskontroller för " Namn" och "ålder" som måste visas på vår sida.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från ovanstående utdata kan vi se att kodavsnittet från mallen för det anpassade direktivet läggs till på sidan.
AngularJS Direktiv och komponenter – ng-transclude
Som vi nämnde ganska tidigare är Angular tänkt att utöka funktionaliteten av html. Och vi har redan sett hur vi kan ha kodinjektion genom att använda anpassade återanvändbara direktiv.
Men i den moderna webbapplikationsutvecklingen finns det också ett koncept att utveckla webbkomponenter. Vilket i princip innebär att skapa våra egna HTML-taggar som kan användas som komponenter i vår kod.
Därför ger angular en annan nivå av kraft för att utöka HTML-taggar genom att ge möjligheten att injicera attribut i själva HTML-taggarna.
Detta görs av "ng-transkludera”-tagg, som är en slags inställning för att berätta för angular att fånga allt som läggs in i direktivet i uppmärkningen.
Låt oss ta ett exempel på hur vi kan uppnå detta.
<!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>
Kodförklaring
- Vi använder direktivet för att definiera en anpassad HTML-tagg som heter 'panel' och lägger till en funktion som kommer att lägga in lite anpassad kod för denna tagg. I utgången kommer vår anpassade paneltagg att visa texten "AngularJS" i en rektangel med en solid svart ram.
- Attributet "transclude" måste anges som sant, vilket krävs av angular för att injicera denna tagg i vår DOM.
- I omfånget definierar vi ett titelattribut. Attribut definieras normalt som namn/värdepar som: namn=”värde”. I vårt fall är namnet på attributet i vår HTML-tagg för rutan "title". "@"-symbolen är kravet från vinkel. Detta görs så att när raden title={{title}} exekveras i steg 5, läggs den anpassade koden för title-attributet till i rutans HTML-tagg.
- Den anpassade koden för titelattributen som bara ritar en solid svart ram för vår kontroll.
- Slutligen kallar vi vår anpassade HTML-tagg tillsammans med title-attributet som definierades.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
- Utdata visar tydligt att title-attributet för panelens html5-tagg har ställts in på det anpassade värdet "Angular.JS".
Kapslade direktiv
Direktiv i AngularJS kan kapslas. Som bara inre moduler eller funktioner i någon programmeringsspråk, kan du behöva bädda in direktiv i varandra.
Du kan få en bättre förståelse av detta genom att se exemplet nedan.
I det här exemplet skapar vi två direktiv som kallas "yttre" och "inre".
- Det inre direktivet visar en text som kallas "Inner".
- Medan det yttre direktivet faktiskt gör en uppmaning till det inre direktivet för att visa texten som kallas "Inre".
</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>
Kodförklaring
- Vi skapar ett direktiv som heter "yttre" som kommer att fungera som vårt överordnade direktiv. Detta direktiv kommer sedan att göra en uppmaning till det "inre" direktivet.
- Begränsningen: 'E' krävs av vinkel för att säkerställa att data från det inre direktivet är tillgängligt för det yttre direktivet. Bokstaven "E" är den korta formen av ordet "element".
- Här skapar vi det inre direktivet som visar texten "Inner" i en div-tagg.
- I mallen för det yttre direktivet (steg #4) kallar vi det inre direktivet. Så här borta injicerar vi mallen från det inre direktivet till det yttre direktivet.
- Slutligen ropar vi direkt ut det yttre direktivet.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången,
- Det kan ses att både de yttre och inre direktiven har anropats, och texten i båda div-taggarna visas.
Hantering av händelser i ett direktiv
Evenemang sådana musklick eller knappklick kan hanteras från själva direktiven. Detta görs med hjälp av länkfunktionen. Länkfunktionen är det som gör att direktivet kan koppla sig till DOM-elementen på en HTML-sida.
Syntax:
Syntaxen för länkelementet är som visas nedan
link: function ($scope, element, attrs)
Länkfunktionen accepterar normalt 3 parametrar inklusive scope, elementet som direktivet är associerat med och målelementets attribut.
Låt oss titta på ett exempel på hur vi kan åstadkomma detta.
<!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>
Kodförklaring
- Vi använder länkfunktionen som definieras i vinkel för att ge direktiven möjlighet att komma åt händelser i HTML DOM.
- Vi använder nyckelordet 'element' eftersom vi vill svara på en händelse för ett HTML DOM-element, som i vårt fall kommer att vara elementet "div". Vi använder då funktionen "bind" och säger att vi vill lägga till anpassad funktionalitet till klickhändelsen för elementet. Ordet "klick" är nyckelordet som används för att beteckna klickhändelsen för en HTML-kontroll. Till exempel har HTML-knappkontrollen klickhändelsen. Eftersom vi i vårt exempel vill lägga till en anpassad kod till klickhändelsen för vår "dev"-tagg, använder vi nyckelordet "click".
- Här säger vi att vi vill ersätta elementets inre HTML (i vårt fall div-elementet) med texten 'Du klickade på mig!'.
- Här definierar vi vår div-tagg för att använda ng-guru anpassade direktiv.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
- Till en början kommer texten 'Klicka på mig' att visas för användaren eftersom detta är vad som initialt har definierats i div-taggen. När du faktiskt klickar på div-taggen kommer nedanstående utdata att visas
Sammanfattning
- Man kan också skapa ett anpassat direktiv som kan användas för att injicera kod i den huvudsakliga vinkelapplikationen.
- Anpassade direktiv kan göras för att anropa medlemmar definierade i scope-objektet i en viss styrenhet genom att använda nyckelorden 'Controller', 'controllerAs' och 'template'.
- Direktiv kan också kapslas för att tillhandahålla inbäddad funktionalitet som kan krävas beroende på applikationens behov.
- Direktiv kan också göras återanvändbara så att de kan användas för att injicera gemensam kod som kan krävas i olika webbapplikationer.
- Direktiv kan också användas för att skapa anpassade HTML-taggar som skulle ha sin egen funktionalitet definierad enligt affärskraven.
- Händelser kan också hanteras inifrån direktiv för att hantera DOM-händelser som knapp- och musklick.
