AANGEPASTE richtlijnen in AngularJS: hoe maken? [Voorbeelden]

Wat is douanerichtlijn?

A Aangepaste richtlijn in AngularJS is een door de gebruiker gedefinieerde richtlijn waarmee gebruikers de gewenste functies kunnen gebruiken om de HTML-functionaliteit uit te breiden. Het kan worden gedefinieerd met behulp van de functie “directive” en vervangt het element waarvoor het wordt gebruikt. Ook al heeft AngularJS veel krachtige richtlijnen uit de box, zijn soms aangepaste richtlijnen vereist.

Hoe maak je een aangepaste richtlijn?

Laten we een voorbeeld bekijken van hoe we een aangepaste AngularJS-richtlijn kunnen maken.

De aangepaste richtlijn in ons geval gaat eenvoudigweg een div-tag injecteren met de tekst "AngularJS Tutorial" op onze pagina wanneer de richtlijn wordt aangeroepen.

<!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>

Maak een aangepaste richtlijn

Code Uitleg

  1. We maken eerst een module voor onze hoekige toepassing. Dit is vereist om een ​​aangepaste richtlijn te maken, omdat de richtlijn met behulp van deze module wordt gemaakt.
  2. We maken nu een aangepaste richtlijn met de naam “ngGuru” en definiëren een functie die aangepaste code voor onze richtlijn zal hebben.Opmerking: - Merk op dat we bij het definiëren van de richtlijn deze hebben gedefinieerd als ngGuru met de letter 'G' als hoofdletter. En wanneer we er vanuit onze div-tag toegang toe krijgen als een richtlijn, hebben we er toegang toe als ng-guru. Dit is hoe angular aangepaste richtlijnen begrijpt die in een applicatie zijn gedefinieerd. Ten eerste moet de naam van de aangepaste richtlijn beginnen met de letters 'ng'. Ten tweede mag het koppelteken '-' alleen worden vermeld bij het aanroepen van de richtlijn. En ten derde de eerste brief following de letters 'ng' bij het definiëren van de richtlijn kunnen zowel kleine letters als hoofdletters zijn.
  3. We gebruiken de sjabloonparameter, een parameter die door Angular is gedefinieerd voor aangepaste richtlijnen. Hierin definiëren we dat wanneer deze richtlijn wordt gebruikt, u gewoon de waarde van de sjabloon gebruikt en deze in de aanroepende code injecteert.
  4. Hier maken we nu gebruik van onze op maat gemaakte “ng-guru” -richtlijn. Wanneer we dit doen, wordt de waarde die we voor onze sjabloon hebben gedefinieerd “ Hoekige JS-zelfstudie ” wordt nu hier geïnjecteerd.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Maak een aangepaste richtlijn

De bovenstaande uitvoer laat duidelijk zien dat onze aangepaste ng-guru-richtlijn, waarin de sjabloon is gedefinieerd voor showing een aangepaste tekst wordt weergegeven in de browser.

AngularJs-richtlijnen en -scopes

De reikwijdte wordt gedefinieerd als de lijm die de controller aan de weergave bindt door de gegevens tussen de weergave en de controller te beheren.

Bij het maken van aangepaste AngularJs-richtlijnen hebben ze standaard toegang tot het scope-object in de bovenliggende controller.

Op deze manier wordt het voor de aangepaste richtlijn eenvoudig om gebruik te maken van de gegevens die worden doorgegeven aan de hoofdcontroller.

Laten we eens kijken naar een voorbeeld van een aangepaste AngularJS-richtlijn van hoe we de reikwijdte van een bovenliggende controller kunnen gebruiken in onze aangepaste richtlijn.

<!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>

AngularJs-richtlijnen en -scopes

Code Uitleg

  1. We maken eerst een controller met de naam “DemoController”. Hierin definiëren we een variabele genaamd tutorialName en koppelen deze aan het scope-object in één instructie – $scope.tutorialName = “AngularJS”.
  2. In onze aangepaste richtlijn kunnen we de variabele “tutorialName” aanroepen met behulp van een expressie. Deze variabele zou toegankelijk zijn omdat deze is gedefinieerd in de controller “DemoController”, die de ouder voor deze richtlijn zou worden.
  3. We verwijzen naar de controller in een div-tag, die zal fungeren als onze bovenliggende div-tag. Houd er rekening mee dat dit eerst moet worden gedaan voordat onze aangepaste richtlijn toegang krijgt tot de tutorialName-variabele.
  4. Eindelijk voegen we gewoon onze aangepaste richtlijn “ng-guru” toe aan onze div-tag.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

AngularJs-richtlijnen en -scopes

Uit de bovenstaande uitvoer blijkt duidelijk dat onze aangepaste richtlijn “ng-guru” gebruik maakt van de scopevariabele tutorialName in de bovenliggende controller.

Controllers gebruiken met richtlijnen

Angular biedt de mogelijkheid om rechtstreeks toegang krijgen tot de lidvariabele van de controller vanuit aangepaste richtlijnen zonder de noodzaak van het scope-object.

Dit is soms nodig omdat u in een toepassing meerdere scope-objecten kunt hebben die bij meerdere controllers horen.

Er is dus een grote kans dat u de fout maakt door toegang te krijgen tot het scope-object van de verkeerde controller.

In dergelijke scenario's is er een manier om specifiek in mijn richtlijn te vermelden: "Ik wil toegang krijgen tot deze specifieke controller".

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

<!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>

Controllers gebruiken met richtlijnen

Code Uitleg

  1. We maken eerst een controller met de naam “DemoController”. Hierin zullen we een variabele definiëren met de naam “tutorialName” en deze keer zullen we deze, in plaats van deze aan het scope-object te koppelen, rechtstreeks aan de controller koppelen.
  2. In onze aangepaste richtlijn vermelden we specifiek dat we de controller “DemoController” willen gebruiken door het controllerparametersleutelwoord te gebruiken.
  3. We maken een verwijzing naar de controller met behulp van de parameter ‘controllerAs’. Dit wordt gedefinieerd door Angular en is de manier om als referentie naar de controller te verwijzen.
  4. Notitie: -Het is mogelijk om toegang te krijgen tot meerdere controllers in een richtlijn door de respectievelijke blokken van de controller, controllerAs en template-instructies op te geven.

  5. Ten slotte gebruiken we in onze sjabloon de referentie die in stap 3 is gemaakt en gebruiken we de lidvariabele die in stap 1 rechtstreeks aan de controller is gekoppeld.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Controllers gebruiken met richtlijnen

De uitvoer laat duidelijk zien dat de aangepaste richtlijn vooral toegang heeft tot de DemoController en de daaraan gekoppelde lidvariabele tutorialName en de tekst “Angular” weergeeft.

Hoe herbruikbare richtlijnen te maken

We zagen al de kracht van aangepaste richtlijnen, maar we kunnen dat naar een hoger niveau tillen door onze eigen herbruikbare richtlijnen te bouwen.

Laten we bijvoorbeeld zeggen dat we code wilden injecteren die de onderstaande HTML-tags altijd op meerdere schermen zou weergeven, wat in feite slechts een invoer is voor de “Naam” en “leeftijd” van de gebruiker.

Om deze functie op meerdere schermen te kunnen gebruiken zonder elke keer te coderen, maken we een hoofdbesturingselement of richtlijn in een hoek om deze besturingselementen vast te houden (“Naam” en “leeftijd” van de gebruiker).

Dus in plaats van elke keer dezelfde code voor het onderstaande scherm in te voeren, kunnen we deze code nu feitelijk in een richtlijn insluiten en die richtlijn op elk gewenst moment insluiten.

Laten we een voorbeeld bekijken van hoe we dit kunnen bereiken.

<!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: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Creëer herbruikbare richtlijnen

Creëer herbruikbare richtlijnen

Code Uitleg

  • In ons codefragment voor een aangepaste richtlijn verandert alleen de waarde die wordt gegeven aan de sjabloonparameter van onze aangepaste richtlijn. In plaats van een plan vijf-tag of -tekst voeren we feitelijk het volledige fragment van twee invoerbesturingselementen in voor de " Naam” en “leeftijd” die op onze pagina moet worden weergegeven.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Creëer herbruikbare richtlijnen

Uit de bovenstaande uitvoer kunnen we zien dat het codefragment uit de sjabloon van de aangepaste richtlijn aan de pagina wordt toegevoegd.

AngularJS-richtlijnen en componenten – ng-transclude

Zoals we al eerder vermeldden, is Angular bedoeld om de functionaliteit van HTML. En we hebben al gezien hoe we code-injectie kunnen realiseren door aangepaste, herbruikbare richtlijnen te gebruiken.

Maar in de moderne ontwikkeling van webapplicaties bestaat er ook een concept van het ontwikkelen van webcomponenten. Wat in feite betekent dat we onze eigen HTML-tags moeten maken die als componenten in onze code kunnen worden gebruikt.

Daarom biedt angular een extra krachtniveau voor het uitbreiden van HTML-tags door de mogelijkheid te bieden attributen in de HTML-tags zelf te injecteren.

Dit wordt gedaan door de “ng-transcluderen'-tag, wat een soort instelling is om angular te vertellen alles vast te leggen wat in de richtlijn in de markup wordt geplaatst.

Laten we een voorbeeld nemen van hoe we dit kunnen bereiken.

<!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>

AngularJS-richtlijnen en componenten

Code Uitleg

  1. We gebruiken de richtlijn om een ​​aangepaste HTML-tag met de naam 'pane' te definiëren en een functie toe te voegen die aangepaste code voor deze tag zal plaatsen. In de uitvoer zal onze aangepaste deelvenstertag de tekst "AngularJS" weergeven in een rechthoek met een effen zwarte rand.
  2. Het attribuut “transclude” moet als true worden vermeld, wat vereist is door angular om deze tag in onze DOM te injecteren.
  3. In het bereik definiëren we een titelattribuut. Attributen worden normaal gesproken gedefinieerd als naam/waarde-paren, zoals: naam=”waarde”. In ons geval is de naam van het attribuut in de HTML-tag van ons deelvenster 'titel'. Het “@”-symbool is de vereiste voor hoekig. Dit wordt gedaan zodat wanneer de regel title={{title}} wordt uitgevoerd in stap 5, de aangepaste code voor het title-attribuut wordt toegevoegd aan de HTML-tag van het deelvenster.
  4. De aangepaste code voor de titelkenmerken die alleen een effen zwarte rand tekent voor onze controle.
  5. Ten slotte roepen we onze aangepaste HTML-tag aan samen met het title-attribuut dat is gedefinieerd.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

AngularJS-richtlijnen en componenten

  • Uit de uitvoer blijkt duidelijk dat het title-attribuut van de html5-tag van het deelvenster is ingesteld op de aangepaste waarde "Angular.JS".

Geneste richtlijnen

Richtlijnen in AngularJS kunnen worden genest. Zoals alleen innerlijke modules of functies in welke dan ook programmeertaal, moet u mogelijk richtlijnen in elkaar inbedden.

U kunt dit beter begrijpen door het onderstaande voorbeeld te bekijken.

In dit voorbeeld maken we twee richtlijnen, genaamd ‘outer’ en ‘inner’.

  • De innerlijke richtlijn geeft een tekst weer met de naam "Inner".
  • Terwijl de buitenste richtlijn feitelijk een oproep doet naar de binnenste richtlijn om de tekst met de naam "Inner" weer te geven.
</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>

Geneste richtlijnen

Code Uitleg

  1. We creëren een richtlijn met de naam “buiten” die zich zal gedragen als onze moederrichtlijn. Deze richtlijn zal dan een beroep doen op de “innerlijke” richtlijn.
  2. De restrict:'E' is vereist door angular om ervoor te zorgen dat de gegevens van de binnenste richtlijn beschikbaar zijn voor de buitenste richtlijn. De letter 'E' is de korte vorm van het woord 'Element'.
  3. Hier maken we de innerlijke richtlijn die de tekst “Inner” in een div-tag weergeeft.
  4. In het sjabloon voor de buitenste richtlijn (stap #4) noemen we de binnenste richtlijn. Dus hier injecteren we het sjabloon van de binnenste richtlijn naar de buitenste richtlijn.
  5. Ten slotte roepen we rechtstreeks de uiterlijke richtlijn op.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Geneste richtlijnen

Van de uitvoer,

  • Je kunt zien dat zowel de buitenste als de binnenste richtlijnen zijn aangeroepen en dat de tekst in beide div-tags wordt weergegeven.

Gebeurtenissen afhandelen in een richtlijn

Evenementen Dergelijke muisklikken of knopklikken kunnen vanuit de richtlijnen zelf worden afgehandeld. Dit gebeurt met behulp van de linkfunctie. De linkfunctie zorgt ervoor dat de richtlijn zichzelf kan hechten aan de DOM-elementen op een HTML-pagina.

Syntax:

De syntaxis van het linkelement is zoals hieronder weergegeven

ng-herhalen

link: function ($scope, element, attrs)

De linkfunctie accepteert normaal gesproken drie parameters, waaronder de reikwijdte, het element waarmee de richtlijn is geassocieerd en de attributen van het doelelement.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

<!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>

Gebeurtenissen afhandelen in een richtlijn

Code Uitleg

  1. We gebruiken de linkfunctie zoals gedefinieerd in angular om de richtlijnen toegang te geven tot gebeurtenissen in de HTML DOM.
  2. We gebruiken het trefwoord 'element' omdat we willen reageren op een gebeurtenis voor een HTML DOM-element, wat in ons geval het 'div'-element zal zijn. We gebruiken dan de functie "bind" en zeggen dat we aangepaste functionaliteit willen toevoegen aan de klikgebeurtenis van het element. Het woord 'klik' is het trefwoord dat wordt gebruikt om de klikgebeurtenis van elk HTML-besturingselement aan te duiden. Het HTML-knopbesturingselement heeft bijvoorbeeld de klikgebeurtenis. Omdat we in ons voorbeeld een aangepaste code willen toevoegen aan de klikgebeurtenis van onze 'dev'-tag, gebruiken we het trefwoord 'click'.
  3. Hier zeggen we dat we de binnenste HTML van het element (in ons geval het div-element) willen vervangen door de tekst 'Je hebt op mij geklikt!'.
  4. Hier definiëren we onze div-tag om de aangepaste richtlijn ng-guru te gebruiken.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Gebeurtenissen afhandelen in een richtlijn

  • In eerste instantie wordt de tekst 'Click Me' aan de gebruiker getoond, omdat dit is wat in eerste instantie in de div-tag is gedefinieerd. Wanneer u daadwerkelijk op de div-tag klikt, wordt de onderstaande uitvoer weergegeven

Gebeurtenissen afhandelen in een richtlijn

Samengevat

  • U kunt ook een aangepaste richtlijn maken die kan worden gebruikt om code in de hoofdhoektoepassing te injecteren.
  • Er kunnen aangepaste richtlijnen worden gemaakt om leden aan te roepen die zijn gedefinieerd in het scope-object in een bepaalde controller door de trefwoorden 'Controller', 'controllerAs' en 'template' te gebruiken.
  • Richtlijnen kunnen ook worden genest om ingebedde functionaliteit te bieden die nodig kan zijn, afhankelijk van de behoefte van de toepassing.
  • Richtlijnen kunnen ook herbruikbaar worden gemaakt, zodat ze kunnen worden gebruikt om gemeenschappelijke code te injecteren die vereist kan zijn voor verschillende webapplicaties.
  • Richtlijnen kunnen ook worden gebruikt om aangepaste HTML-tags te maken, waarvan de functionaliteit is gedefinieerd volgens de zakelijke vereisten.
  • Gebeurtenissen kunnen ook vanuit richtlijnen worden afgehandeld om DOM-gebeurtenissen zoals knop- en muisklikken af ​​te handelen.