CUSTOM-Anweisungen in AngularJS: Wie erstelle ich? [Beispiele]

Was ist eine Zollrichtlinie?

A Zollrichtlinie in AngularJS ist eine benutzerdefinierte Direktive, die es Benutzern ermöglicht, gewünschte Funktionen zu verwenden, um die HTML-Funktionalität zu erweitern. Es kann mithilfe der Funktion „Direktive“ definiert werden und ersetzt das Element, für das es verwendet wird. Obwohl AngularJS viele leistungsstarke Anweisungen enthält box, manchmal sind benutzerdefinierte Anweisungen erforderlich.

Wie erstelle ich eine benutzerdefinierte Richtlinie?

Schauen wir uns ein Beispiel an, wie wir eine benutzerdefinierte AngularJS-Direktive erstellen können.

Die benutzerdefinierte Direktive fügt in unserem Fall einfach ein div-Tag ein, das den Text „AngularJS Tutorial“ auf unserer Seite enthält, wenn die Direktive aufgerufen wird.

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

Erstellen Sie eine benutzerdefinierte Anweisung

Code Erklärung

  1. Wir erstellen zunächst eine Modulen für unsere Winkelanwendung. Dies ist zum Erstellen einer benutzerdefinierten Direktive erforderlich, da die Direktive mit diesem Modul erstellt wird.
  2. Wir erstellen jetzt eine benutzerdefinierte Direktive namens „ngGuru“ und definieren eine Funktion, die benutzerdefinierten Code für unsere Direktive enthält.Hinweis: - Beachten Sie, dass wir bei der Definition der Direktive sie als ngGuru mit dem Buchstaben „G“ als Großbuchstaben definiert haben. Und wenn wir über unser div-Tag als Direktive darauf zugreifen, greifen wir als ng-guru darauf zu. So versteht Angular benutzerdefinierte Anweisungen, die in einer Anwendung definiert sind. Zunächst sollte der Name der benutzerdefinierten Direktive mit den Buchstaben „ng“ beginnen. Zweitens sollte das Bindestrichsymbol „-“ nur beim Aufruf der Direktive erwähnt werden. Und drittens folgt der erste Buchstabewing Die Buchstaben „ng“ bei der Definition der Direktive können entweder Klein- oder Großbuchstaben sein.
  3. Wir verwenden den Template-Parameter, einen von Angular definierten Parameter für benutzerdefinierte Anweisungen. Darin definieren wir, dass bei jeder Verwendung dieser Direktive einfach der Wert der Vorlage verwendet und in den aufrufenden Code eingefügt wird.
  4. Hier nutzen wir nun unsere individuell erstellte „ng-guru“-Direktive. Wenn wir dies tun, wird der Wert, den wir für unsere Vorlage definiert haben „ Angular JS-Tutorial „Hier wird nun eingespritzt.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Erstellen Sie eine benutzerdefinierte Anweisung

Die obige Ausgabe zeigt deutlich, dass unsere benutzerdefinierte ng-guru-Direktive, in der die Vorlage für sho definiert istwing Ein benutzerdefinierter Text wird angezeigtyed im Browser.

AngularJS-Richtlinien und -Bereiche

Der Bereich ist als Klebstoff definiert, der den Controller an die Ansicht bindet, indem er die Daten zwischen der Ansicht und dem Controller verwaltet.

Beim Erstellen benutzerdefinierter AngularJs-Direktiven haben diese standardmäßig Zugriff auf das Bereichsobjekt im übergeordneten Controller.

Auf diese Weise wird es für die benutzerdefinierte Direktive einfacher, die an den Hauptcontroller übergebenen Daten zu nutzen.

Schauen wir uns ein Beispiel für eine benutzerdefinierte AngularJS-Direktive an, wie wir den Bereich eines übergeordneten Controllers in unserer benutzerdefinierten Direktive verwenden können.

<!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-Richtlinien und -Bereiche

Code Erklärung

  1. Wir erstellen zunächst einen Controller namens „DemoController“. Hier definieren wir eine Variable namens „tutorialName“ und hängen sie in einer Anweisung an das Scope-Objekt an – $scope.tutorialName = „AngularJS“.
  2. In unserer benutzerdefinierten Direktive können wir die Variable „tutorialName“ mithilfe eines Ausdrucks aufrufen. Auf diese Variable kann zugegriffen werden, da sie im Controller „DemoController“ definiert ist, der zum übergeordneten Controller dieser Direktive werden würde.
  3. Wir verweisen auf den Controller in einem div-Tag, das als unser übergeordnetes div-Tag fungiert. Beachten Sie, dass dies zuerst erfolgen muss, damit unsere benutzerdefinierte Direktive auf die Variable „tutorialName“ zugreifen kann.
  4. Schließlich hängen wir einfach unsere benutzerdefinierte Direktive „ng-guru“ an unser div-Tag an.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

AngularJS-Richtlinien und -Bereiche

Die obige Ausgabe zeigt deutlich, dass unsere benutzerdefinierte Direktive „ng-guru“ die Bereichsvariable „tutorialName“ im übergeordneten Controller verwendet.

Verwendung von Controllern mit Anweisungen

Angular bietet die Möglichkeit dazu Greifen Sie direkt über benutzerdefinierte Anweisungen auf die Mitgliedsvariable des Controllers zu ohne dass das Scope-Objekt erforderlich ist.

Dies ist manchmal erforderlich, da in einer Anwendung möglicherweise mehrere Bereichsobjekte vorhanden sind, die zu mehreren Controllern gehören.

Es besteht also eine hohe Wahrscheinlichkeit, dass Sie den Fehler machen, auf das Scope-Objekt des falschen Controllers zuzugreifen.

In solchen Szenarien gibt es eine Möglichkeit, in meiner Anweisung ausdrücklich zu erwähnen, dass ich auf diesen bestimmten Controller zugreifen möchte.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

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

Verwenden von Controllern mit Anweisungen

Code Erklärung

  1. Wir erstellen zunächst einen Controller namens „DemoController“. Hier definieren wir eine Variable mit dem Namen „tutorialName“ und dieses Mal hängen wir sie nicht an das Scope-Objekt, sondern direkt an den Controller an.
  2. In unserer benutzerdefinierten Direktive erwähnen wir ausdrücklich, dass wir den Controller „DemoController“ verwenden möchten, indem wir das Controller-Parameter-Schlüsselwort verwenden.
  3. Mit dem Parameter „controllerAs“ erstellen wir eine Referenz auf den Controller. Dies wird von Angular definiert und ist die Möglichkeit, den Controller als Referenz zu referenzieren.
  4. Hinweis: -Es ist möglich, auf mehrere Controller in einer Direktive zuzugreifen, indem entsprechende Blöcke der Controller-, ControllerAs- und Template-Anweisungen angegeben werden.

  5. Schließlich verwenden wir in unserer Vorlage die in Schritt 3 erstellte Referenz und die Mitgliedsvariable, die in Schritt 1 direkt an den Controller angehängt wurde.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Verwenden von Controllern mit Anweisungen

Die Ausgabe zeigt deutlich, dass die benutzerdefinierte Direktive insbesondere auf den DemoController und die daran angehängte Mitgliedsvariable „tutorialName“ zugreift und den Text „Angular“ anzeigt.

So erstellen Sie wiederverwendbare Anweisungen

Wir haben bereits die Leistungsfähigkeit benutzerdefinierter Richtlinien erkannt, aber wir können dies auf die nächste Stufe heben, indem wir unsere eigenen wiederverwendbaren Richtlinien erstellen.

Nehmen wir zum Beispiel an, wir wollten Code einfügen, der die folgenden HTML-Tags immer auf mehreren Bildschirmen anzeigt, was im Grunde nur eine Eingabe für den „Namen“ und das „Alter“ des Benutzers ist.

Um diese Funktion auf mehreren Bildschirmen wiederzuverwenden, ohne jedes Mal etwas zu programmieren, erstellen wir in Angular ein Master-Steuerelement oder eine Master-Anweisung, um diese Steuerelemente („Name“ und „Alter“ des Benutzers) aufzunehmen.

Anstatt also jedes Mal den gleichen Code für den folgenden Bildschirm einzugeben, können wir diesen Code tatsächlich in eine Direktive einbetten und diese Direktive jederzeit einbetten.

Sehen wir uns ein Beispiel dafür an, wie wir dies erreichen können.

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

Erstellen Sie wiederverwendbare Richtlinien

Erstellen Sie wiederverwendbare Richtlinien

Code Erklärung

  • Was sich in unserem Codeausschnitt für eine benutzerdefinierte Direktive ändert, ist lediglich der Wert, der dem Vorlagenparameter unserer benutzerdefinierten Direktive zugewiesen wird. Anstelle eines Plan-Five-Tags oder Textes geben wir tatsächlich das gesamte Fragment von zwei Eingabesteuerelementen für „ ein. Name“ und „Alter“, die auf unserer Seite angezeigt werden müssen.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Erstellen Sie wiederverwendbare Richtlinien

Anhand der obigen Ausgabe können wir erkennen, dass der Codeausschnitt aus der Vorlage der benutzerdefinierten Direktive zur Seite hinzugefügt wird.

AngularJS-Anweisungen und -Komponenten – ng-transclude

Wie bereits erwähnt, soll Angular die Funktionalität von erweitern HTML. Und wir haben bereits gesehen, wie wir Code-Injection mithilfe benutzerdefinierter wiederverwendbarer Anweisungen durchführen können.

Aber in der modernen Webanwendungsentwicklung gibt es auch ein Konzept zur Entwicklung von Webkomponenten. Das bedeutet im Wesentlichen, dass wir unsere eigenen HTML-Tags erstellen, die als Komponenten in unserem Code verwendet werden können.

Daher bietet Angular eine weitere Leistungsebene für die Erweiterung von HTML-Tags, indem es die Möglichkeit bietet, Attribute in die HTML-Tags selbst einzufügen.

Dies geschieht durch die „ng-transclude”-Tag, eine Art Einstellung, die Angular anweist, alles zu erfassen, was in die Direktive im Markup eingefügt wird.

Nehmen wir ein Beispiel, wie wir das erreichen können.

<!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-Anweisungen und -Komponenten

Code Erklärung

  1. Wir verwenden die Direktive, um ein benutzerdefiniertes HTML-Tag namens „pane“ zu definieren und fügen eine Funktion hinzu, die benutzerdefinierten Code für dieses Tag einfügt. In der Ausgabe zeigt unser benutzerdefiniertes Pane-Tag den Text „AngularJS“ in einem Rechteck mit einem durchgehenden schwarzen Rand an.
  2. Das Attribut „transclude“ muss als „true“ angegeben werden, was von Angular benötigt wird, um dieses Tag in unser DOM einzufügen.
  3. Im Bereich definieren wir ein Titelattribut. Attribute werden normalerweise als Name/Wert-Paare definiert wie: name=“value“. In unserem Fall lautet der Name des Attributs in unserem HTML-Tag „title“. Das „@“-Symbol ist die Anforderung von Angular. Dies geschieht, damit bei Ausführung der Zeile title={{title}} in Schritt 5 der benutzerdefinierte Code für das Titelattribut zum Bereichs-HTML-Tag hinzugefügt wird.
  4. Der benutzerdefinierte Code für die Titelattribute, der lediglich einen durchgehenden schwarzen Rahmen für unser Steuerelement zeichnet.
  5. Schließlich rufen wir unser benutzerdefiniertes HTML-Tag zusammen mit dem definierten Titelattribut auf.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

AngularJS-Anweisungen und -Komponenten

  • Die Ausgabe zeigt deutlich, dass das Title-Attribut des Pane-HTML5-Tags auf den benutzerdefinierten Wert „Angular.JS“ gesetzt wurde.

Verschachtelte Anweisungen

Direktiven in AngularJS können verschachtelt werden. Wie nur innere Module oder Funktionen in jedem Programmiersprache, müssen Sie möglicherweise Anweisungen ineinander einbetten.

Sie können dies besser verstehen, indem Sie sich das folgende Beispiel ansehen.

In diesem Beispiel erstellen wir zwei Anweisungen namens „outer“ und „inner“.

  • Die innere Anweisung zeigt einen Text namens „Inner“ an.
  • Während die äußere Direktive tatsächlich die innere Direktive aufruft, um den Text mit dem Namen „Inner“ anzuzeigen.
</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>

Verschachtelte Anweisungen

Code Erklärung

  1. Wir erstellen eine Direktive namens „outer“, die sich wie unsere übergeordnete Direktive verhält. Diese Direktive ruft dann die „innere“ Direktive auf.
  2. Das „restrict:‘E‘“ wird von Angular benötigt, um sicherzustellen, dass die Daten aus der inneren Direktive für die äußere Direktive verfügbar sind. Der Buchstabe „E“ ist die Kurzform des Wortes „Element“.
  3. Hier erstellen wir die innere Direktive, die den Text „Inner“ in einem div-Tag anzeigt.
  4. In der Vorlage für die äußere Direktive (Schritt 4) rufen wir die innere Direktive auf. Hier fügen wir also die Vorlage von der inneren Direktive in die äußere Direktive ein.
  5. Schließlich rufen wir direkt die äußere Direktive auf.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Verschachtelte Anweisungen

Aus der Ausgabe,

  • Es ist ersichtlich, dass sowohl die äußere als auch die innere Direktive aufgerufen wurden und der Text in beiden div-Tags angezeigt wirdyed.

Behandeln von Ereignissen in einer Direktive

Events Solche Mausklicks oder Tastenklicks können innerhalb der Direktiven selbst verarbeitet werden. Dies geschieht über die Link-Funktion. Die Link-Funktion ermöglicht es der Direktive, sich an die DOM-Elemente einer HTML-Seite anzuhängen.

Syntax:

Die Syntax des Link-Elements ist wie unten dargestellt

ng-Wiederholung

link: function ($scope, element, attrs)

Die Link-Funktion akzeptiert normalerweise drei Parameter, darunter den Bereich, das Element, mit dem die Direktive verknüpft ist, und die Attribute des Zielelements.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

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

Behandeln von Ereignissen in einer Direktive

Code Erklärung

  1. Wir verwenden die in Angular definierte Link-Funktion, um den Direktiven den Zugriff auf Ereignisse im HTML-DOM zu ermöglichen.
  2. Wir verwenden das Schlüsselwort „element“, weil wir auf ein Ereignis für ein HTML-DOM-Element reagieren möchten, in unserem Fall das „div“-Element. Wir verwenden dann die Funktion „bind“ und sagen, dass wir dem Klickereignis des Elements benutzerdefinierte Funktionen hinzufügen möchten. Das Wort „Klick“ ist das Schlüsselwort, mit dem das Klickereignis eines beliebigen HTML-Steuerelements bezeichnet wird. Beispielsweise verfügt das HTML-Schaltflächensteuerelement über das Click-Ereignis. Da wir in unserem Beispiel einen benutzerdefinierten Code zum Click-Event unseres „dev“-Tags hinzufügen möchten, verwenden wir das Schlüsselwort „click“.
  3. Hier sagen wir, dass wir den inneren HTML-Code des Elements (in unserem Fall des div-Elements) durch den Text „You clicked me!“ ersetzen möchten.
  4. Hier definieren wir unser div-Tag, um die benutzerdefinierte Direktive ng-guru zu verwenden.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Behandeln von Ereignissen in einer Direktive

  • Zunächst wird dem Benutzer der Text „Click Me“ angezeigt, da dies ursprünglich im div-Tag definiert wurde. Wenn Sie tatsächlich auf das div-Tag klicken, wird die folgende Ausgabe angezeigt

Behandeln von Ereignissen in einer Direktive

Zusammenfassung

  • Man kann auch eine benutzerdefinierte Direktive erstellen, die zum Einfügen von Code in die Haupt-Angular-Anwendung verwendet werden kann.
  • Mithilfe der Schlüsselwörter „Controller“, „controllerAs“ und „template“ können benutzerdefinierte Anweisungen erstellt werden, um im Bereichsobjekt definierte Mitglieder in einem bestimmten Controller aufzurufen.
  • Direktiven können auch verschachtelt werden, um eingebettete Funktionen bereitzustellen, die je nach Bedarf der Anwendung erforderlich sein können.
  • Direktiven können auch wiederverwendbar gemacht werden, sodass sie zum Einfügen von allgemeinem Code verwendet werden können, der für verschiedene Webanwendungen erforderlich sein könnte.
  • Direktiven können auch zum Erstellen benutzerdefinierter HTML-Tags verwendet werden, deren eigene Funktionalität entsprechend den Geschäftsanforderungen definiert wird.
  • Ereignisse können auch innerhalb von Direktiven verarbeitet werden, um DOM-Ereignisse wie Schaltflächen- und Mausklicks zu verarbeiten.