Hur man skapar CUSTOM-direktiv i AngularJS med exempel

Innehållsförteckning:

Anonim

Vad är anpassat direktiv?

Ett anpassat direktiv i Angular Js är ett användardefinierat direktiv med önskad funktionalitet. Även om AngularJS har många kraftfulla direktiv direkt, krävs det vissa anpassade direktiv.

I den här handledningen lär du dig-

  • Hur skapar jag ett anpassat direktiv?
  • AngularJs direktiv och räckvidd
  • Använda styrenheter med direktiv
  • Hur man skapar återanvändningsbara direktiv
  • AngularJS-direktiv och komponenter - ng-transclude
  • Kapslade direktiv
  • Hantering av händelser i ett direktiv

Hur skapar jag ett anpassat direktiv?

Låt oss ta en titt på ett exempel på hur vi kan skapa ett anpassat 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 kallas.

Event Registration

Guru99 Global Event

Kodförklaring:

  1. Vi skapar först en modul för vår vinkelapplikation. Detta krävs för att skapa ett anpassat direktiv eftersom direktivet skapas med den här modulen.
  2. Vi skapar nu ett anpassat direktiv som heter "ngGuru" och definierar en funktion som har anpassad kod för vårt direktiv.

Notera:-

Observera att när vi definierar direktivet har vi definierat det som ngGuru med bokstaven 'G' som huvudstad. Och när vi får åtkomst till den från vår div-tagg som ett direktiv, kommer vi åt den som ng-guru. Så här förstår vinkel anpassade direktiv som definieras i en applikation. För det första bör namnet på det anpassade direktivet börja med bokstäverna 'ng'. För det andra bör bindestreck-symbolen "-" endast nämnas när man ringer till direktivet. Och för det tredje kan den första bokstaven som följer bokstäverna 'ng' när den definierar direktivet vara antingen lägre eller versaler.

  1. Vi använder mallparametern som en parameter definierad av Angular för anpassade direktiv. I detta definierar vi att närhelst detta direktiv används, använd bara mallen och injicera den i anropskoden.
  2. Här använder vi nu vårt skräddarsydda "ng-guru" -direktiv. När vi gör detta kommer nu värdet som vi definierade för vår mall "
    Angular JS Tutorial
    " att injiceras.

Om koden körs framgångsrikt visas följande utdata 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 räckvidd

Omfattningen definieras som limet som binder styrenheten till vyn genom att hantera data mellan vyn och styrenheten.

När du skapar anpassade AngularJs-direktiv kommer de som standard att ha tillgång till omfångsobjektet i den överordnade styrenheten.

På detta sätt blir det enkelt för det anpassade direktivet att använda de data som skickas till huvudkontrollen.

Låt oss titta på ett exempel på hur vi kan använda räckvidden för en föräldrakontrollant i vårt anpassade direktiv.

Event Registration

Guru99 Global Event

Kodförklaring:

  1. Vi skapar först en controller som heter "DemoController". I detta definierar vi en variabel som heter tutorialName och bifogar den till scope-objektet i ett uttalande - $ scope.tutorialName = "AngularJS".
  2. I vårt anpassade direktiv kan vi kalla variabeln "tutorialName" med hjälp av ett uttryck. Denna variabel skulle vara tillgänglig eftersom den definieras i styrenheten "DemoController", som skulle bli förälder för detta direktiv.
  3. Vi refererar till styrenheten i en div-tagg, som fungerar som vår moder div-tagg. Observera att detta måste göras först för att vårt anpassade direktiv ska få åtkomst till variabeln tutorialName.
  4. Slutligen bifogar vi bara vårt anpassade direktiv "ng-guru" till vår div-tagg.

Om koden körs framgångsrikt visas följande utdata 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 omfattningsvariabeln tutorialName i den överordnade styrenheten.

Använda styrenheter med direktiv

Angular ger möjlighet att komma åt styrenhetens medlemsvariabel direkt från anpassade direktiv utan behov av scope-objektet.

Detta blir ibland nödvändigt eftersom du i ett program kan ha objekt med flera omfång som tillhör flera styrenheter.

Så det finns en stor chans att du kan göra misstaget att få åtkomst till omfångsobjektet för fel styrenhet.

I sådana scenarier finns det ett sätt att specifikt nämna att säga "Jag vill komma åt denna specifika styrenhet" från mitt direktiv.

Låt oss titta på ett exempel på hur vi kan uppnå detta.

Event Registration

Guru99 Global Event

Kodförklaring:

  1. Vi skapar först en controller 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 fästa den till scope-objektet, kommer vi att fästa den direkt till styrenheten.
  2. I vårt anpassade direktiv nämner vi specifikt att vi vill använda styrenheten "DemoController" med hjälp av kontrollparameterns nyckelord.
  3. Vi skapar en referens till styrenheten med parametern "controllerAs". Detta definieras av Angular och är sättet att referera till regulatorn som en referens.

    Obs: - Det är möjligt att komma åt flera styrenheter i ett direktiv genom att ange respektive block för styrenheten, controllerAs och malluttalanden.

  4. Slutligen, i vår mall, använder vi referensen som skapades i steg 3 och använder medlemsvariabeln som fästes direkt till styrenheten i steg 1.

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Utgången visar tydligt att det anpassade direktivet särskilt har åtkomst till DemoController och medlemsvariabeln tutorialName som är bifogad och visar texten "Angular".

Hur man skapar återanvändningsbara direktiv

Vi såg redan kraften i 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 nedanstående HTML-taggar över flera skärmar, vilket i grunden bara är en inmatning för "Namn" och "ålder" för användaren.

För att återanvända denna funktion 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" för 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.

Event Registration

Guru99 Global Event

Kodförklaring:

  1. I vårt kodavsnitt för ett anpassat direktiv, det som ändras är bara det värde som ges till mallparametern i vårt anpassade direktiv.

    I stället för en plan fem-tagg eller text, skriver vi faktiskt in hela fragmentet med två ingångskontroller för "Namn" och "ålder" som måste visas på vår sida.

Om koden körs framgångsrikt visas följande utdata 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 HTML-funktionaliteten. Och vi har redan sett hur vi kan få kodinjektion genom att använda anpassade återanvändbara direktiv.

Men i den moderna webbapplikationsutvecklingen finns det också ett koncept att utveckla webbkomponenter. Vilket innebär i grunden att vi skapar egna HTML-taggar som kan användas som komponenter i vår kod.

Därför ger vinkel ytterligare kraft för att förlänga HTML-taggar genom att ge möjlighet att injicera attribut i själva HTML-taggarna.

Detta görs med taggen " ng-transclude ", som är en slags inställning för att berätta vinkeln att fånga allt som placeras i direktivet i markeringen.

Låt oss ta ett exempel på hur vi kan uppnå detta.

Event Registration

Guru99 Global Event



Angular JS

Kodförklaring:

  1. Vi använder direktivet för att definiera en anpassad HTML-tagg som kallas "pane" och lägger till en funktion som kommer att lägga till någon anpassad kod för den här taggen. I utgången kommer vår anpassade rutan att visa texten "AngularJS" i en rektangel med en heltäckande svart kant.
  2. Attributet "transclude" måste nämnas som sant, vilket krävs av vinkel för att injicera denna tagg i vår DOM.
  3. 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 "title". Symbolen "@" är kravet från vinkel. Detta görs så att när radtiteln = {{title}} körs i steg 5, läggs den anpassade koden för titelattributet till i HTML-taggen i rutan.
  4. Den anpassade koden för titelattributen som bara ritar en helt svart ram för vår kontroll.
  5. Slutligen ringer vi till vår anpassade HTML-tagg tillsammans med titelattributet som definierades.

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

  • Utgången visar tydligt att titelattributet för rutan html5-taggen har ställts in till det anpassade värdet "Angular.JS".

Kapslade direktiv

Direktiv i vinkel kan kapslas. Som bara inre moduler eller funktioner på vilket programmeringsspråk som helst kan du behöva bädda in direktiv i varandra.

Du kan få en bättre förståelse för 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 heter "Inre".
  • Medan det yttre direktivet faktiskt ringer till det inre direktivet att visa texten "Inner".



Guru99 Global Event

Kodförklaring:

  1. Vi skapar ett direktiv som kallas "yttre" som kommer att fungera som vårt förordningsdirektiv. Detta direktiv kallar sedan det "inre" direktivet.
  2. Begränsningen: 'E' krävs av vinkel för att säkerställa att uppgifterna från det inre direktivet är tillgängliga för det yttre direktivet. Bokstaven "E" är den korta formen av ordet "Element".
  3. Här skapar vi det inre direktivet som visar texten "Inre" i en div-tagg.
  4. I mallen för det yttre direktivet (steg 4) kallar vi det inre direktivet. Så här injicerar vi mallen från det inre direktivet till det yttre direktivet.
  5. Slutligen ropar vi direkt det yttre direktivet.

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Från produktionen,

  • 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

Händelser som 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 det möjligt för direktivet att koppla sig till DOM-elementen på en HTML-sida.

Syntax:

Syntaxen för länkelementet är som visas nedan

ng-upprepa

link: function ($scope, element, attrs)

Länkfunktionen accepterar normalt tre parametrar inklusive omfånget, det element som direktivet är associerat med och attributen för målelementet.

Låt oss titta på ett exempel på hur vi kan åstadkomma detta.

Event Registration

Guru99 Global Event


Click Me

Kodförklaring:

  1. Vi använder länkfunktionen som definierad i vinkel för att ge direktiven möjlighet att komma åt händelser i HTML DOM.
  2. Vi använder nyckelordet "element" eftersom vi vill svara på en händelse för ett HTML DOM-element, vilket i vårt fall kommer att vara "div" -elementet. Vi använder sedan "bind" -funktionen och säger att vi vill lägga till anpassad funktionalitet till elementets klickhändelse. Klickordet är nyckelordet som används för att beteckna klickhändelsen för alla HTML-kontroller. HTML-knappkontrollen har till exempel 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 "klicka".
  3. 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!'.
  4. Här definierar vi vår div-tagg för att använda ng-guru anpassade direktivet.

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

  • Inledningsvis kommer texten "Click Me" att visas för användaren eftersom det är det som ursprungligen har definierats i div-taggen. När du faktiskt klickar på div-taggen visas nedanstående utdata

Sammanfattning

  • Man kan också skapa ett anpassat direktiv som kan användas för att injicera kod i huvudvinkelapplikationen.
  • Anpassade direktiv kan göras för att ringa medlemmar som definierats i scope-objektet i en viss controller 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 vanlig kod som kan krävas i olika webbapplikationer.
  • Direktiven kan också användas för att skapa anpassade HTML-taggar som skulle ha sin egen funktionalitet definierad enligt företagets krav.
  • Händelser kan också hanteras från direktiven för att hantera DOM-händelser som knapp- och musklick.