So erstellen Sie eine benutzerdefinierte Direktive in AngularJS mit Beispiel

Inhaltsverzeichnis:

Anonim

Was ist eine Zollrichtlinie?

Eine benutzerdefinierte Direktive in Angular Js ist eine benutzerdefinierte Direktive mit der gewünschten Funktionalität. Obwohl AngularJS viele leistungsstarke Direktiven standardmäßig enthält, sind manchmal benutzerdefinierte Direktiven erforderlich.

In diesem Tutorial lernen Sie:

  • Wie erstelle ich eine benutzerdefinierte Richtlinie?
  • AngularJs Richtlinien und Geltungsbereiche
  • Verwenden von Controllern mit Direktiven
  • So erstellen Sie wiederverwendbare Anweisungen
  • AngularJS-Richtlinien und -Komponenten - ng-transclude
  • Verschachtelte Direktiven
  • Behandlung von Ereignissen in einer Richtlinie

Wie erstelle ich eine benutzerdefinierte Richtlinie?

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

Die benutzerdefinierte Direktive in unserem Fall fügt einfach ein div-Tag ein, das beim Aufruf der Direktive den Text "AngularJS Tutorial" auf unserer Seite enthält.

Event Registration

Guru99 Global Event

Code Erläuterung:

  1. Wir erstellen zunächst ein Modul für unsere Winkelanwendung. Dies ist erforderlich, um eine benutzerdefinierte Direktive zu erstellen, 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 die Direktive bei der Definition als ngGuru mit dem Buchstaben 'G' als Großbuchstaben definiert haben. Und wenn wir von unserem 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 kann der erste Buchstabe nach den Buchstaben 'ng' bei der Definition der Richtlinie entweder in Klein- oder Großbuchstaben geschrieben werden.

  1. Wir verwenden den Template-Parameter, einen von Angular für benutzerdefinierte Direktiven definierten Parameter. In diesem Abschnitt definieren wir, dass bei jeder Verwendung dieser Direktive nur der Wert der Vorlage verwendet und in den aufrufenden Code eingefügt wird.
  2. Hier nutzen wir jetzt unsere benutzerdefinierte "ng-guru" -Richtlinie. Wenn wir dies tun, wird der Wert, den wir für unsere Vorlage "
    Angular JS Tutorial " definiert haben, jetzt hier eingefügt.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

  • Die obige Ausgabe zeigt deutlich, dass unsere benutzerdefinierte ng-guru-Direktive, in der die Vorlage zum Anzeigen eines benutzerdefinierten Textes definiert ist, im Browser angezeigt wird.

AngularJs Richtlinien und Geltungsbereiche

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

Wenn Sie benutzerdefinierte AngularJs-Direktiven erstellen, haben diese standardmäßig Zugriff auf das Bereichsobjekt im übergeordneten Controller.

Auf diese Weise wird es für die benutzerdefinierte Direktive einfach, die Daten zu verwenden, die an den Hauptcontroller übergeben werden.

Schauen wir uns ein Beispiel an, wie wir den Umfang eines übergeordneten Controllers in unserer benutzerdefinierten Direktive verwenden können.

Event Registration

Guru99 Global Event

Code Erläuterung:

  1. Wir erstellen zuerst einen Controller namens "DemoController". In diesem Fall 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 wäre zugegriffen, da sie im Controller "DemoController" definiert ist, der das übergeordnete Element für diese Direktive werden würde.
  3. Wir verweisen auf den Controller in einem div-Tag, das als übergeordnetes div-Tag fungiert. Beachten Sie, dass dies zuerst erfolgen muss, damit unsere benutzerdefinierte Direktive auf die Variable tutorialName zugreifen kann.
  4. Wir hängen schließlich einfach unsere benutzerdefinierte Direktive "ng-guru" an unser div-Tag an.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

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

Verwenden von Controllern mit Direktiven

Angular bietet die Möglichkeit, direkt aus benutzerdefinierten Anweisungen auf die Mitgliedsvariable des Controllers zuzugreifen, ohne dass das Bereichsobjekt erforderlich ist.

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

Es besteht also eine hohe Wahrscheinlichkeit, dass Sie den Fehler machen, auf das Bereichsobjekt 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.

Event Registration

Guru99 Global Event

Code Erläuterung:

  1. Wir erstellen zuerst einen Controller namens "DemoController". In diesem Abschnitt definieren wir eine Variable mit dem Namen "tutorialName". Dieses Mal hängen wir sie nicht an das Bereichsobjekt an, sondern direkt an den Controller.
  2. In unserer benutzerdefinierten Direktive erwähnen wir ausdrücklich, dass wir den Controller "DemoController" mithilfe des Schlüsselworts controller parameter verwenden möchten.
  3. Mit dem Parameter "controllerAs" erstellen wir einen Verweis auf den Controller. Dies wird durch Angular definiert und ist die Möglichkeit, die Steuerung als Referenz zu referenzieren.

    Hinweis: - Es ist möglich, auf mehrere Controller in einer Direktive zuzugreifen, indem die entsprechenden Blöcke der Controller-, ControllerAs- und Template-Anweisungen angegeben werden.

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

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

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 von benutzerdefinierten Richtlinien erkannt, aber wir können dies auf die nächste Ebene heben, indem wir unsere eigenen wiederverwendbaren Richtlinien erstellen.

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

Um diese Funktion auf mehreren Bildschirmen wiederzuverwenden, ohne jedes Mal zu codieren, erstellen wir ein Hauptsteuerelement oder eine Direktive in Winkel, um diese Steuerelemente zu halten ("Name" und "Alter" des Benutzers).

Anstatt jetzt 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 zu jedem Zeitpunkt einbetten.

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

Event Registration

Guru99 Global Event

Code Erläuterung:

  1. In unserem Code-Snippet für eine benutzerdefinierte Direktive ändert sich lediglich der Wert, der dem Vorlagenparameter unserer benutzerdefinierten Direktive zugewiesen wird.

    Anstelle eines Plan-5-Tags oder -Textes geben wir tatsächlich das gesamte Fragment von 2 Eingabesteuerelementen für "Name" und "Alter" ein, die auf unserer Seite angezeigt werden müssen.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Aus der obigen Ausgabe können wir ersehen, dass das Code-Snippet aus der Vorlage der benutzerdefinierten Direktive zur Seite hinzugefügt wird.

AngularJS-Richtlinien und -Komponenten - ng-transclude

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

In der modernen Entwicklung von Webanwendungen gibt es jedoch auch ein Konzept für die Entwicklung von Webkomponenten. Dies bedeutet im Grunde, dass wir eigene HTML-Tags erstellen, die als Komponenten in unserem Code verwendet werden können.

Daher bietet Angular eine weitere Leistungsstufe für die Erweiterung von HTML-Tags, indem Attribute in die HTML-Tags selbst eingefügt werden können.

Dies erfolgt über das Tag " ng-transclude ", eine Art Einstellung, mit der Angular angewiesen wird, alles zu erfassen, was in der Direktive im Markup enthalten ist.

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

Event Registration

Guru99 Global Event



Angular JS

Code Erläuterung:

  1. Wir verwenden die Direktive, um ein benutzerdefiniertes HTML-Tag mit dem Namen "pane" zu definieren und eine Funktion hinzuzufügen, die benutzerdefinierten Code für dieses Tag einfügt. In der Ausgabe zeigt unser benutzerdefiniertes Fenster-Tag den Text "AngularJS" in einem Rechteck mit einem durchgezogenen schwarzen Rand an.
  2. Das Attribut "transclude" muss als "true" angegeben werden, was von angle erforderlich ist, um dieses Tag in unser DOM zu injizieren.
  3. Im Bereich definieren wir ein Titelattribut. Attribute werden normalerweise als Name / Wert-Paare wie folgt definiert: name = "value". In unserem Fall lautet der Name des Attributs in unserem HTML-Tag "title". Das "@" Symbol ist die Anforderung von Winkel. Dies geschieht, damit beim Ausführen des Zeilentitels = {{title}} in Schritt 5 der benutzerdefinierte Code für das title-Attribut zum HTML-Tag des Bereichs hinzugefügt wird.
  4. Der benutzerdefinierte Code für die Titelattribute, der nur einen durchgehenden schwarzen Rand für unser Steuerelement zeichnet.
  5. Schließlich rufen wir unser benutzerdefiniertes HTML-Tag zusammen mit dem definierten title-Attribut auf.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

  • Die Ausgabe zeigt deutlich, dass das title-Attribut des html5-Tags im Bereich auf den benutzerdefinierten Wert "Angular.JS" festgelegt wurde.

Verschachtelte Direktiven

Anweisungen in Winkel können verschachtelt werden. Wie nur innere Module oder Funktionen in einer beliebigen Programmiersprache müssen Sie möglicherweise Anweisungen ineinander einbetten.

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

In diesem Beispiel erstellen wir zwei Anweisungen, die als "äußere" und "innere" bezeichnet werden.

  • Die innere Direktive zeigt einen Text namens "Inner" an.
  • Während die äußere Direktive tatsächlich die innere Direktive aufruft, um den Text "Inner" anzuzeigen.



Guru99 Global Event

Code Erläuterung:

  1. Wir erstellen eine Direktive namens "Outer", die sich wie unsere übergeordnete Direktive verhält. Diese Direktive ruft dann die "innere" Direktive auf.
  2. Die Einschränkung: 'E' wird von Angular benötigt, um sicherzustellen, dass die Daten aus der inneren Direktive der äußeren Direktive zur Verfügung stehen. 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 drüben injizieren wir die Vorlage von der inneren Direktive in die äußere Direktive.
  5. Schließlich rufen wir direkt die äußere Richtlinie auf.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

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 wird.

Behandlung von Ereignissen in einer Richtlinie

Ereignisse wie Mausklicks oder Tastenklicks können in Direktiven selbst behandelt werden. Dies erfolgt über die Link-Funktion. Mit der Link-Funktion kann sich die Direktive an die DOM-Elemente einer HTML-Seite anhängen.

Syntax:

Die Syntax des Link-Elements ist wie folgt

ng-wiederholen

link: function ($scope, element, attrs)

Die Verknüpfungsfunktion akzeptiert normalerweise 3 Parameter, einschließlich des Bereichs, des Elements, dem die Direktive zugeordnet ist, und der Attribute des Zielelements.

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

Event Registration

Guru99 Global Event


Click Me

Code Erläuterung:

  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 antworten möchten, das in unserem Fall das Element "div" ist. Wir verwenden dann die Funktion "Binden" und sagen, dass wir dem Klickereignis des Elements benutzerdefinierte Funktionen hinzufügen möchten. Das 'Klick'-Wort ist das Schlüsselwort, mit dem das Klickereignis eines HTML-Steuerelements bezeichnet wird. Das HTML-Schaltflächensteuerelement verfügt beispielsweise über das Klickereignis. Da wir in unserem Beispiel dem Klickereignis unseres "dev" -Tags einen benutzerdefinierten Code 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 das div-Element) durch den Text "Sie haben mich angeklickt!" Ersetzen möchten.
  4. Hier definieren wir unser div-Tag, um die benutzerdefinierte Anweisung ng-guru zu verwenden.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

  • 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

Zusammenfassung

  • Sie können auch eine benutzerdefinierte Direktive erstellen, mit der Code in die Hauptwinkelanwendung eingefügt werden kann.
  • Benutzerdefinierte Anweisungen können erstellt werden, um Mitglieder aufzurufen, die im Bereichsobjekt in einem bestimmten Controller definiert sind, indem die Schlüsselwörter 'Controller', 'controllerAs' und 'template' verwendet werden.
  • Direktiven können auch verschachtelt werden, um eingebettete Funktionen bereitzustellen, die je nach Anforderung der Anwendung erforderlich sein können.
  • Direktiven können auch wiederverwendbar gemacht werden, damit sie zum Einfügen von allgemeinem Code verwendet werden können, der für verschiedene Webanwendungen erforderlich sein kann.
  • Direktiven können auch verwendet werden, um benutzerdefinierte HTML-Tags zu erstellen, deren eigene Funktionalität gemäß den Geschäftsanforderungen definiert wird.
  • Ereignisse können auch aus Direktiven heraus behandelt werden, um DOM-Ereignisse wie Schaltflächen- und Mausklicks zu behandeln.