So erstellen Sie eine benutzerdefinierte Direktive in AngularJS: Schritt für Schritt erklärt

Zur Erweiterung der Funktionalität von HTML in eckigem JS werden Zollrichtlinien verwendet. Die Direktive wird von den Benutzern definiert, um HTML-Funktionalitäten um die gewünschten Funktionen zu erweitern. Jedes Element, für das die Zollrichtlinien generiert werden, wird dadurch ersetzt. Obwohl in Angular JS viele Direktiven vorhanden sind, kann es Fälle geben, in denen benutzerdefinierte Direktiven erforderlich sind.

Die folgenden Elemente können zum Erstellen benutzerdefinierter Direktiven von Angular JS verwendet werden. Die Aktivierung einer Richtlinie basiert auf dem Typ einer Richtlinie.

• Elementdirektiven: Immer wenn es ein passendes Element gibt, erfolgt die Aktivierung der Direktive.
• Attribut: Mit der Übereinstimmung eines Attributs wird die Direktive aktiviert.
• CSS: Mit dem Abgleich eines CSS-Stils wird die Direktive aktiviert.
• Kommentar: Beim Auffinden eines passenden Kommentars wird die Direktive aktiviert.

Registrieren eines Moduls mit dem einer Richtlinie

Programm zur Modulregistrierung nach einer Richtlinie

Quelle

Im Modul wurde ein Funktionsaufruf für direct() durchgeführt. Durch diesen Aufruf kann eine neue Richtlinie registriert werden.

Die Anweisung zum Registrieren hat einen bestimmten Namen, der als erster Parameter für die Funktion verwendet wird. Dieser Name erscheint in der HTML-Vorlage, wenn der Benutzer die Direktive aktivieren möchte. Im Code wird der Name 'div' verwendet. Das bedeutet, dass jedes Mal, wenn das HTML-Element mit dem Namen „div“ mit einem Element in der HTML-Vorlage übereinstimmt, die Direktive aktiviert wird.

Als zweiter Parameter in der function-Direktive wird eine Factory-Funktion verwendet. Beim Aufrufen der Funktion sollte eine Direktivendefinition zurückgegeben werden. Die Funktion wird vom Winkel-JS aufgerufen, das ein JavaScript-Objekt zurückgibt, das die Direktivendefinition enthält. Der obige Code zeigt die Rückgabe des JavaScript-Objekts.

Mit dem zurückgegebenen Objekt sind zwei Eigenschaften vorhanden; ein Beschränkungs- und ein Vorlagenfeld.

Ob die Aktivierung einer Direktive durch den Abgleich eines HTML-Elements oder durch den Abgleich eines Attributs erfolgen soll, wird durch das Feld „restrict“ festgelegt. Wir können angeben, ob eine Direktive von HTML-Elementen aktiviert werden soll, indem wir „restrict“ auf „E“ und „A“ setzen. Die Benutzer können festlegen, dass die Direktive nur durch die Attributübereinstimmung eines Elements aktiviert wird. Die Angabe von beiden AE ermöglicht den Abgleich sowohl eines HTML-Elements als auch eines Attributs.

Die andere Eigenschaft, dh das Vorlagenfeld, ist am Ersetzen des Inhalts der übereinstimmenden div-Elemente beteiligt.

Wenn das HTML in einer HTML-Seite so ist

Die Aktivierung der hinzugefügten Direktive erfolgt, wenn das div-Element von angle JS gefunden wird.

Datenbindung in Angular

Die Bedeutung der Bindungsdaten muss bekannt sein, bevor das Konzept der Winkeldatenbindung verstanden wird. Mit den Änderungen im Wert von Daten gibt es automatische Änderungen bei den Elementen, die an die Daten gebunden sind. Es kann ein einseitiger oder ein zweiseitiger Prozess sein. Es gibt vier Typen von Angular-Datenbindungen; Interpolation, Eigenschaftsbindung, Ereignisbindung und bidirektionale Datenbindung.

Lesen Sie: Unterschied zwischen Angular und AngularJs

Erstellung einer Zollrichtlinie

Einige Schritte, die bei der Erstellung einer benutzerdefinierten Attributdirektive erforderlich sind, sind:

Schritt 1: Eine Direktive wird durch eine Klassendekoration mithilfe des @Directive-Dekorators erstellt.

Schritt 2: Renderer und Services ElementRef werden eingefügt.

Schritt 3: Die Direktive soll beim Modul registriert werden.

Schritt 4: Die Direktive soll verwendet werden.

• Die Anwendung einer benutzerdefinierten Direktive auf ein HTML-Element macht das Element als „HOST ELEMENT“ bekannt.

Das Beispiel zeigt die Erstellung einer benutzerdefinierten Direktive in Angular JS. Beim Aufruf der Direktive wird ein div-Tag eingefügt.

Ein Codebeispiel für die Erstellung einer benutzerdefinierten Direktive

Quelle

Erklärung des Codes:

• Für die Anwendung von Angular wird zunächst ein Modul erstellt. Die Erstellung des Moduls ist wichtig für die Erstellung von benutzerdefinierten Direktiven, da mit der Verwendung dieses Moduls die benutzerdefinierte Direktive erstellt wird.
• Eine benutzerdefinierte Direktive mit dem Namen „ngGuru“ wird erstellt und eine Funktion definiert, die den benutzerdefinierten Code der Direktive enthält.
• • Zur Definition der Direktive wird der Buchstabe G in ngGuru großgeschrieben. Beim Zugriff über das div-Tag bleibt der Name ng-guru. Die benutzerdefinierten Anweisungen, die in einer Anwendung definiert sind, werden durch dieses Format in Angular verstanden. Der Buchstabe „ng“ wird dem Namen aller benutzerdefinierten Direktiven vorangestellt, und ein Bindestrich (–) sollte immer dann verwendet werden, wenn eine Direktive aufgerufen wird. Schließlich kann der Buchstabe, der auf „ng“ folgt, entweder klein oder groß geschrieben werden, während die Direktive definiert wird.

• Der Parameter wird durch Winkel definiert, dh der Vorlagenparameter wird verwendet. Es ist so definiert, dass bei jeder Verwendung der Direktive der Vorlagenwert verwendet und beim Aufrufen des Codes eingefügt wird.
• Das Programm verwendet die eigens erstellte „ng-guru“-Direktive. Dabei wird der Vorlagenwert hier eingefügt.

Die erfolgreiche Ausführung des Codes generiert die folgende Ausgabe.

Ausgabe des Codes

Quelle

In der Ausgabe ist die benutzerdefinierte Direktive dh der ng-guru mit dem definierten Template zu sehen. Die Vorlage ist für die Anzeige eines benutzerdefinierten Textes definiert.

Umfang der AngularJS-Direktiven

Der Controller ist über den Bereich, der den Datenfluss zwischen dem Controller und der Ansicht verwaltet, an die Ansicht gebunden. Die benutzerdefinierten Direktiven in Angular greifen standardmäßig auf das Bereichsobjekt zu, das im übergeordneten Controller enthalten ist. Daher wird der Prozess einfach, wenn die Daten, die an den Controller weitergegeben werden, von der Zollrichtlinie verwendet werden können.

Ein Beispiel für eine eckige benutzerdefinierte Direktive wird unten gezeigt, um die Verwendung des Geltungsbereichs in der benutzerdefinierten Direktive zu veranschaulichen. Ein Codebeispiel

Quelle

Erläuterung des Codes

• Zunächst wird ein Controller mit dem Namen „DemoController“ erstellt. Eine Variable mit dem Namen

„tutorialName“ ist im Controller definiert und an den Geltungsbereich angehängt. Der verwendete Befehl lautet:

$scope.tutorialName = „AngularJS“.

• Die Variable, dh „tutorialName“, kann in der benutzerdefinierten Direktive mithilfe eines Ausdrucks aufgerufen werden. Da die Variable in „DemoController“ definiert ist, ist sie zugänglich. Für unsere Direktive ist „DemoController“,= das übergeordnete Element.
• Auf den Controller wird in einem div-Tag verwiesen, das zum übergeordneten div-Tag wird. Das Ganze ist erst einmal durchzuführen, damit die Custom-Direktive auf die Variable ‚tutorialName‘ zugreifen kann.
• Schließlich wird die benutzerdefinierte Direktive „ng-guru“ an das div-Tag angehängt.
• Die erfolgreiche Ausführung des Codes generiert die folgende Ausgabe.

Ausgabe des obigen Codes

Quelle

In der Ausgabe kann beobachtet werden, dass der tutorialName, der die Bereichsvariable ist, von der benutzerdefinierten Direktive verwendet wird, die „ng-guru“ ist.

Ereignisbehandlung in einer Direktive

Die Behandlung von Ereignissen wie Mausklicks oder das Klicken von Schaltflächen kann innerhalb einer Direktive erfolgen. Die Link-Funktion wird verwendet, um die Ereignisse zu behandeln. Die Direktive wird an die Elemente des DOM in einer HTML-Seite durch die Link-Funktion angehängt.

Die für die Verknüpfung verwendete Syntax lautet: link: function ($scope, element, attrs).

Drei Parameter werden von der Verknüpfungsfunktion akzeptiert; Geltungsbereich, Element und die Attribute.

Deswegen,

• Eine benutzerdefinierte Direktive kann zum Einfügen des Codes in die Hauptanwendung von Angular erstellt werden.
• Mitglieder können durch die benutzerdefinierten Direktiven aufgerufen werden. Diese Mitglieder werden innerhalb des Gültigkeitsbereichs des Objekts innerhalb eines Controllers definiert. Verwendete Schlüsselwörter sind 'Controller', Schlüsselwort ControllerAs' und das Schlüsselwort 'Vorlage'
• Eingebettete Funktionalität kann durch das Verschachteln der Direktiven bereitgestellt werden.
• Gemeinsamer Code kann eingefügt werden, indem die Direktiven wiederverwendbar gemacht werden.
• Benutzerdefinierte HTML-Tags können über benutzerdefinierte Anweisungen erstellt werden. Diese Tags haben ihre eigene Funktionalität und werden als ihre Anforderung definiert.
• +DOM-Ereignisse können von der Direktive behandelt werden.

Lernen Sie Softwarekurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

Fazit

Benutzerdefinierte Direktiven in Angularjs werden zum Erweitern der HTML-Funktionalität in Angular verwendet. Die Erstellung dieser Art von benutzerdefinierter Direktive wird in dem Artikel mit einem Beispiel für eine benutzerdefinierte Direktive besprochen . Insgesamt wurde ein wenig am Programmierkonzept gerüttelt. Wenn Sie jedoch ein Experte in der Softwareentwicklung werden möchten, sollten Sie Ihre in der Softwarebranche angewandten Programmierkenntnisse beherrschen. In Anbetracht dessen können Sie den von upGrad angebotenen Kurs Executive PG Program in Software Development – ​​Specialization in Full Stack Development besuchen. Das 13-monatige Programm richtet sich an mittelständische Fachkräfte im Alter von 21 bis 45 Jahren, die auf ihr Glück in der Softwareentwicklungsbranche warten. Mit über 16 Programmiersprachen und -tools, Online-Sitzungen und Kursen von Führungskräften bietet Ihnen der Kurs Platzierungssicherheit in Top-Branchen. Bei Interesse kontaktieren Sie unser Team für weitere Details. Wir werden Ihnen behilflich sein.