AngularJS-Benutzerdefinierte Direktive: Templates, Scope & Transclude
James Hartmann
⚡ Intelligente Zusammenfassung
Benutzerdefinierte Direktiven in AngularJS erweitern HTML um wiederverwendbares Verhalten, das Sie selbst definieren. Eine Direktivenfabrik gibt ein Definitionsobjekt zurück, und AngularJS fügt dieses Verhalten überall dort ein, wo das entsprechende Element, Attribut, die entsprechende Klasse oder der entsprechende Kommentar im Markup vorkommt.
Was ist eine benutzerdefinierte Direktive in AngularJS?
A Zollrichtlinie In AngularJS ist eine benutzerdefinierte Direktive eine Erweiterung von HTML um selbst definiertes Verhalten. Sie wird auf einem HTML-String registriert. Modulen AngularJS verwendet die „directive“-Funktion und fügt sie überall dort ein, wo das entsprechende Element oder Attribut auf der Seite vorkommt. Obwohl AngularJS über viele leistungsstarke Funktionen verfügt. integrierte Direktiven unkonventionell, wie zum Beispiel ng-WiederholungManchmal sind benutzerdefinierte Direktiven erforderlich.
⚠️ Korrektur: Im Originaltext hieß es, eine benutzerdefinierte Direktive „ersetzt das Element, für das sie verwendet wird“. Standardmäßig ist dies nicht der Fall: template wird eingefügt innerhalb das passende Element. Ersatzbedarf replace: true, veraltet seit AngularJS 1.3.
⚠️ Supporthinweis: AngularJS hat erreicht Lebensende am 31. Dezember 2021 und erhält keine weiteren Patches oder Sicherheitsupdates. Alles Folgende bleibt für die Wartung von bestehendem AngularJS 1.x-Code gültig; in modernen Angular-Versionen entsprechen dies Komponenten und Attributdirektiven.
Der Grund für die Verwendung einer benutzerdefinierten Direktive liegt in der Wiederholung. Wenn derselbe Markup-Code oder dieselbe DOM-Struktur auf mehreren Bildschirmen erscheint, wandelt eine Direktive ihn in ein einziges benanntes Tag um.
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 mit dem Text „Angular JS Tutorial“ in unsere Seite ein, wenn die Direktive aufgerufen wird.
Der untenstehende Screenshot mit Anmerkungen nummeriert die vier Teile der Auflistung, die im Anschluss erläutert werden.
<!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>
⚠️ Warnung – in dieser Auflistung bleiben Mängel erhalten: Der Code wird exakt so wiedergegeben, wie er veröffentlicht wurde. Drei Fehler treten in jedem Eintrag hier wieder auf: chrset="UTF 8" sollte sein charset="UTF-8"; angular.js und angular.min.js Beide werden geladen, daher wird AngularJS zweimal geladen; und angular-route.js wird vor der Datei geladen, von der es abhängt.
Code Erläuterung
- Wir erstellen zunächst eine Modulen Für unsere AngularJS-Anwendung. Dies ist erforderlich, um eine benutzerdefinierte Direktive zu erstellen, da die Direktive mithilfe dieses Moduls erstellt wird.
- Wir erstellen nun eine benutzerdefinierte Direktive namens „ng“.Guruund die Definition einer Factory-Funktion, die den benutzerdefinierten Code für unsere Direktive enthält.
- Wir verwenden den Template-Parameter, einen von AngularJS definierten Parameter für benutzerdefinierte Direktiven. Damit legen wir fest, dass bei Verwendung dieser Direktive der Wert des Templates verwendet und in den aufrufenden Code eingefügt wird.
- Hier verwenden wir nun unsere selbst erstellte „ng-guru“-Direktive. Dabei wird der Wert, den wir für unsere Vorlage definiert haben,
<div>Angular JS Tutorial</div>wird nun hier eingespritzt.
Direktivenbenennung und Normalisierung
Die Namensabweichung zwischen dem JavaSkripte und HTML verwirren die meisten Anfänger. AngularJS normalisiert Jeder Element- und Attributname wird vor dem Abgleich entfernt: Es entfernt alle x- or data- Präfix, dann wird ein durch ein Trennzeichen begrenzter Name umgewandelt -, : or _ in CamelCase. Deshalb ngGuru Streichhölzer ng-guru, und warum data-ng-guru Funktioniert auch. Die CamelCase-Schreibweise ist der korrekte Name; Kebab-Case ist lediglich die HTML-Schreibweise.
⚠️ Korrektur: Im Originaltext hieß es, ein benutzerdefinierter Direktivenname „sollte mit den Buchstaben ‚ng‘ beginnen“. offizielle AngularJS-Dokumentation rät zum Gegenteil: Stellen Sie Ihren eigenen Anweisungen niemals ein Präfix voran ngOder sie könnten mit einer zukünftigen integrierten Funktion kollidieren. Verwenden Sie Ihr eigenes Präfix, zum Beispiel g99Guru geschrieben als g99-guru.
Wenn der Code erfolgreich ausgeführt wird, erscheint diese Ausgabe.
Ausgang:
Die Ausgabe zeigt deutlich, dass unsere benutzerdefinierte ng-guru-Direktive, die die Vorlage zum Anzeigen eines benutzerdefinierten Textes definiert hat, im Browser angezeigt wird. Im nächsten Schritt fügen wir dieser Vorlage wiederverwendbaren Code hinzu.
Wie man wiederverwendbare Direktiven erstellt
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 beispielsweise an, wir möchten Code einfügen, der die folgenden HTML-Tags auf mehreren Bildschirmen immer anzeigt. Dabei handelt es sich im Grunde nur um ein Eingabefeld für den „Namen“ und das „Alter“ des Benutzers.
Um dieses Fragment auf mehreren Bildschirmen wiederzuverwenden, ohne es jedes Mal neu programmieren zu müssen, erstellen wir in AngularJS ein Master-Steuerelement oder eine Direktive, die diese beiden Steuerelemente enthält.
Anstatt den Markup-Code auf jedem Bildschirm zu wiederholen, betten wir ihn nun in eine Direktive ein und rufen diese auf. Der Screenshot unten zeigt die einzige geänderte Zeile.
<!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: ' Name <input type="text"><br><br> Age<input type="text">' }; }); </script> </body> </html>
Code Erläuterung
- In unserem Code-Snippet für eine benutzerdefinierte Direktive ändert sich lediglich der Wert des Template-Parameters. Anstelle eines einfachen Tags oder einer Textzeile geben wir den kompletten Code zweier Eingabefelder für „Name“ und „Alter“ ein, der auf unserer Seite angezeigt werden soll.
💡 TIPP: Eine so lange Vorlage gehört in eine eigene Datei. Tauschen template für templateUrl: 'name-age.html'.
Wenn der Code erfolgreich ausgeführt wird, erscheint diese Ausgabe.
Ausgang:
Aus der obigen Ausgabe geht hervor, dass der Codeausschnitt aus der Vorlage der benutzerdefinierten Direktive zur Seite hinzugefügt wird. Die Vorlage ist noch statisch, daher besteht der nächste Schritt darin, sie mit Daten zu füllen.
AngularJS-Direktiven und -Scopes
Das kann wird als das Bindeglied zwischen Controller und View definiert, das die Daten zwischen View und Controller verwaltet.
Beim Erstellen benutzerdefinierter AngularJS-Direktiven haben diese standardmäßig Zugriff auf das Scope-Objekt des übergeordneten Controllers. Es handelt sich um dasselbe Scope-Objekt, nicht um eine Kopie.
Auf diese Weise wird es für die benutzerdefinierte Direktive einfacher, die an den Hauptcontroller übergebenen Daten zu nutzen.
Betrachten wir ein Beispiel, wie wir den Gültigkeitsbereich eines übergeordneten Controllers in unserer benutzerdefinierten Direktive verwenden können. Der folgende Screenshot nummeriert die vier Schritte.
<!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>
Code Erläuterung
- Zuerst erstellen wir einen Controller namens „DemoController“. Darin definieren wir eine Variable namens tutorialName und binden sie in einer einzigen Anweisung an das Scope-Objekt:
$scope.tutorialName = "Angular JS". - 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.
- 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.
- Schließlich hängen wir einfach unsere benutzerdefinierte Direktive „ng-guru“ an unser div-Tag an.
Wenn der Code erfolgreich ausgeführt wird, erscheint diese Ausgabe.
Ausgang:
Die obige Ausgabe zeigt deutlich, dass unsere benutzerdefinierte Direktive „ng-guru“ die Scope-Variable „tutorialName“ im übergeordneten Controller verwendet. Die gemeinsame Nutzung des übergeordneten Scopes ist zwar praktisch, aber nicht immer erwünscht.
Verwenden von Controllern mit Anweisungen
AngularJS bietet die Möglichkeit, Greifen Sie direkt über benutzerdefinierte Anweisungen auf die Mitgliedsvariable des Controllers zu ohne dass das Scope-Objekt erforderlich ist.
Dies wird mitunter notwendig, da eine Anwendung mehrere Scope-Objekte haben kann, die zu mehreren Controllern gehören, wodurch die Wahrscheinlichkeit hoch ist, versehentlich auf das Scope-Objekt des falschen Controllers zuzugreifen.
In einem solchen Szenario gibt es eine Möglichkeit, von meiner Direktive aus konkret zu sagen: „Ich möchte auf diesen Controller zugreifen“.
Schauen wir uns ein Beispiel an, wie wir das erreichen können. Der Screenshot nummeriert die vier Schritte.
<!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>
Code Erläuterung
- Zuerst erstellen wir einen Controller namens „DemoController“. Darin definieren wir eine Variable namens „tutorialName“ und binden sie diesmal nicht an das Scope-Objekt, sondern direkt an den Controller.
- 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.
- Wir erstellen eine Referenz zum Controller mithilfe des Parameters „controllerAs“. Dieser Parameter ist in AngularJS definiert und dient dazu, den Controller über einen Alias zu referenzieren.
- Schließlich verwenden wir in unserer Vorlage die in Schritt 3 erstellte Referenz und die Membervariable, die in Schritt 1 direkt an den Controller angehängt wurde.
Hinweis: Es ist möglich, in einer Direktive auf mehrere Controller zuzugreifen, indem die entsprechenden Blöcke des Controllers, der ControllerAs und der Template-Anweisungen angegeben werden. Um einen Controller zu erreichen, … Elternteil Verwenden Sie stattdessen den Controller der Direktive. require.
Wenn der Code erfolgreich ausgeführt wird, erscheint diese Ausgabe.
Ausgang:
Die Ausgabe zeigt deutlich, dass die benutzerdefinierte Direktive auf den DemoController und die zugehörige Membervariable tutorialName zugreift und den Text „Angular“ anzeigt. Beide Ansätze lesen weiterhin aus einem gemeinsamen Gültigkeitsbereich, was durch einen isolierten Gültigkeitsbereich verhindert wird.
Wie sich die Bindungen @, =, & und < in einem isolierten Gültigkeitsbereich unterscheiden
Eine Direktive, die denselben Gültigkeitsbereich wie ihr übergeordnetes Element verwendet, kann nur einmal pro Controller verwendet werden, da zwei Kopien um dieselben Variablen konkurrieren würden. scope Ein Objekt erzeugt ein IsolierbereichDie Direktive sieht nichts außerhalb der aufgelisteten Eigenschaften. Jeder Eintrag verwendet ein Präfixsymbol, das angibt, wie sein Wert übertragen wird.
| Symbol | Anleitung | Wert erhalten | Verwenden Sie es für |
|---|---|---|---|
| @ | Einbahnstraße | Das Attribut als interpolierte Zeichenkette | Etiketten, Titel, beliebiger Klartext |
| = | Zweiwege Array Modul | Das lebende Objekt oder der Wert selbst | Modelle, die die Direktive zurückschreibt an |
| & | Ausgehender Anruf | Eine Funktion, die einen Ausdruck im äußeren Gültigkeitsbereich auswertet | Rückrufe wie beim Schließen oder Speichern |
| < | Einbahnstraße | Der ermittelte Wert, niemals aufwärts geschrieben. | Schreibgeschützte Daten, hinzugefügt in AngularJS 1.5 |
💡 TIPP: Greifen nach < bevor =Einwegdatenbindung ist übersichtlicher und verhindert, dass eine Komponente die Daten ihres Aufrufers unbemerkt verändert. Der nächste Abschnitt verwendet … @.
AngularJS-Direktiven und -Komponenten: ng-transclude
Wie bereits erwähnt, dient AngularJS dazu, die Funktionalität von 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 das Konzept der Entwicklungping Webkomponenten, was im Grunde bedeutet, eigene HTML-Tags zu erstellen, die als Komponenten in unserem Code verwendet werden können.
Daher bietet AngularJS eine weitere Ebene der Leistungsfähigkeit bei der Erweiterung von HTML-Tags, indem es die Möglichkeit bietet, jegliches Markup, das der Aufrufer innerhalb des Tags einfügt, einzuschließen.
Dies geschieht durch die „ng-transcludeDie Direktive weist AngularJS an, alles, was sich innerhalb des benutzerdefinierten Tags im Markup befindet, zu erfassen und an dieser Stelle in die Vorlage einzufügen.
Betrachten wir ein Beispiel, wie wir dies erreichen können. Der Screenshot nummeriert die fünf folgenden Punkte.
<!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>
Code Erläuterung
- Wir verwenden die Direktive, um ein benutzerdefiniertes HTML-Tag namens „pane“ zu definieren, dessen Code von einer Factory-Funktion bereitgestellt wird. In der Ausgabe zeigt das pane-Tag den Text „Angular JS“ in einem Rechteck mit einem durchgezogenen schwarzen Rahmen an.
- Die „transclude“-Eigenschaft muss auf „true“ gesetzt werden, wodurch AngularJS angewiesen wird, das ursprüngliche innere Markup beizubehalten und es verfügbar zu machen.
ng-transclude. - Im Scope-Objekt deklarieren wir eine Titelbindung. Attribute werden normalerweise als Name-Wert-Paare geschrieben, wie zum Beispiel:
name="value"In unserem Fall ist das Attribut des Pane-Tags „title“, und das „@“-Symbol weist AngularJS an, dieses Attribut als interpolierte Zeichenkette zu kopieren. - Die Vorlage zeichnet den durchgezogenen schwarzen Rahmen für unsere Steuerung und markiert die Stelle, an der das transkribierte Markup eingefügt wird.
- Zum Schluss rufen wir unser benutzerdefiniertes HTML-Tag zusammen mit dem definierten Titelattribut auf.
⚠️ Korrektur: Im Originaltext wurde „@“ als „eine Anforderung von Angular“ bezeichnet. Es handelt sich nicht um eine Formalität: @ ist eines der vier Symbole für die Bindung isolierter Gültigkeitsbereiche in der obigen Tabelle und liefert immer eine Zeichenkette. Diese Vorlage wird außerdem niemals gerendert. {{title}}und kein Controller definiert titleDaher ist nur der transkludierte Text sichtbar.
Wenn der Code erfolgreich ausgeführt wird, erscheint diese Ausgabe.
Ausgang:
- Die Ausgabe zeigt das benutzerdefinierte Pane-Element als umrandete Box, die den transkludierten Text „Angular JS“ enthält.
Eine Direktive kann auch andere Direktiven enthalten, wodurch größere Komponenten zusammengesetzt werden.
Verschachtelte Direktiven
Direktiven in AngularJS können verschachtelt werden. Wie innere Module oder Funktionen in beliebigen Direktiven. 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.
Der untenstehende Screenshot markiert beide Direktivendefinitionen und die Stelle, an der die eine die andere aufruft.
</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>
⚠️ Warnung – der Mangel ist in diesem Angebot enthalten: Die veröffentlichte Auflistung beginnt bei </head>, verpasste Eröffnung <!DOCTYPE html>, <html> und <head> Zeilen. Fügen Sie diese vor dem Ausführen hinzu.
Code Erläuterung
- Wir erstellen eine Direktive namens „outer“, die sich wie unsere übergeordnete Direktive verhält. Diese Direktive ruft dann die „innere“ Direktive auf.
- Das
restrict:'E'Die Option weist AngularJS an, jede Direktive mit den folgenden Kriterien abzugleichen: Element Name, weshalb sie als Tags geschrieben werden können<outer>und<inner>Der Buchstabe „E“ ist die Kurzform des Wortes „Element“. - Hier erstellen wir die innere Direktive, die den Text „Inner“ in einem div-Tag anzeigt.
- Im Template der äußeren Direktive rufen wir die innere Direktive auf. Hier fügen wir also das Template der inneren Direktive in die äußere Direktive ein.
- Schließlich rufen wir direkt die äußere Direktive auf.
⚠️ Korrektur: Im Originaltext wurde behauptet restrict:'E' wird benötigt, „um sicherzustellen, dass die Daten der inneren Direktive der äußeren Direktive zur Verfügung stehen“. Das tut es aber nicht; es steuert lediglich wie Eine Direktive kann geschrieben werden. Verschachtelung funktioniert, weil der Compiler die gerade eingefügte Vorlage weiter durchläuft. Zum Datenaustausch verwenden Sie require und controller.
Wenn der Code erfolgreich ausgeführt wird, erscheint diese Ausgabe.
Ausgang:
Aus der Ausgabe,
- Man kann sehen, dass sowohl die äußere als auch die innere Direktive aufgerufen wurden und der Text in beiden div-Tags angezeigt wird.
Das Rendern von Markup ist nur die eine Hälfte dessen, was eine Direktive leistet; die andere Hälfte besteht in der Reaktion auf den Benutzer.
Behandlung von Ereignissen in einer Direktive
VERANSTALTUNGEN Aktionen wie Maus- oder Tastenklicks können direkt in Direktiven verarbeitet werden. Dies geschieht mithilfe der Link-Funktion. Die Link-Funktion ermöglicht es der Direktive, sich an die DOM-Elemente einer HTML-Seite anzuhängen.
Syntax:
Die Syntax der Link-Funktion ist wie folgt:
link: function ($scope, element, attrs)
Die Link-Funktion akzeptiert normalerweise drei Parameter: den Gültigkeitsbereich, das Element, dem die Direktive zugeordnet ist, und die Attribute des Zielelements. Zwei weitere Parameter, ein erforderlicher Controller und eine Transclude-Funktion, werden beim Aufruf hinzugefügt.
Kompilierungsphase versus Linkphase
AngularJS verarbeitet eine Direktive in zwei Durchläufen, und die Kenntnis des jeweiligen Durchlaufs verrät Ihnen, wo Ihr Code hingehört.
- Kompilieren Wird einmalig auf dem Template-Element ausgeführt, bevor ein Gültigkeitsbereich existiert. Es eignet sich für strukturelle Änderungen, die von jedem Klon gemeinsam genutzt werden.
- verbindung Wird einmal pro Instanz ausgeführt, nachdem die Vorlage geklont und ein Scope zugewiesen wurde. DOM-Listener und Scope-Lesezugriffe gehören hierher.
Da `compile` keinen Gültigkeitsbereich hat, gehört alles, was Daten benötigt, in den Linker. Deshalb definiert das folgende Beispiel Folgendes: link allein.
Schauen wir uns ein Beispiel an, wie wir das erreichen können. Der Screenshot nummeriert die vier folgenden Punkte.
<!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>
Code Erläuterung
- Wir verwenden die in AngularJS definierte Link-Funktion, um der Direktive die Möglichkeit zu geben, auf Ereignisse im HTML-DOM zuzugreifen.
- Wir verwenden das Schlüsselwort „element“, um auf ein Ereignis eines HTML-DOM-Elements zu reagieren, in unserem Fall des „div“-Elements. Anschließend nutzen wir die Funktion „bind“, um dem Klickereignis des Elements benutzerdefinierte Funktionalität hinzuzufügen. Das Schlüsselwort „click“ kennzeichnet das Klickereignis eines beliebigen HTML-Steuerelements.
- Hier geben wir an, dass wir den inneren HTML-Code des Elements, in unserem Fall des div-Elements, durch den Text „Du hast mich angeklickt“ ersetzen möchten.
- Hier definieren wir unser div-Tag, um die benutzerdefinierte Direktive ng-guru zu verwenden.
💡 TIPP: Eine Direktive sollte nach sich selbst aufräumen. Entfernen Sie alle Listener, deren Lebensdauer das Element innerhalb der Direktive überdauert. element.on('$destroy', ...)oder die Seite weist einen Speicherverlust auf.
Wenn der Code erfolgreich ausgeführt wird, erscheint diese Ausgabe.
Ausgang:
- Zunächst wird dem Benutzer der Text „Klick mich“ angezeigt, da dieser innerhalb des div-Tags definiert wurde. Wenn Sie auf den div-Tag klicken, wird stattdessen die unten stehende Ausgabe angezeigt.
In jedem der obigen Beispiele wurden ein oder zwei Eigenschaften desselben Definitionsobjekts verwendet. Es lohnt sich, den vollständigen Satz aufzubewahren.ping zur Hand.
Direktivendefinition Objekteigenschaften Referenz
Das von einer Direktivenfabrik zurückgegebene Objekt ist das DirektivendefinitionsobjektJede Eigenschaft beantwortet eine Frage zum Verhalten der Direktive.
| Eigenschaft | Standard | Was sie tut, |
|---|---|---|
| eine Beschränkung | 'EA' | Welche Formen passen: E Element, A Attribut, C Klasse, M Kommentar |
| Vorlage | keine | Inline-Markup, das in das übereinstimmende Element eingefügt wurde |
| templateUrl | keine | Vorlagendateipfad, einmal abgerufen und dann zwischengespeichert |
| kann | falsch | „false“ teilt den Gültigkeitsbereich des übergeordneten Objekts, „true“ erzeugt ein untergeordnetes Objekt, ein Objekt isoliert |
| Controller | keine | Ein Konstruktor, der eine API bereitstellt, kann von anderen Direktiven benötigt werden. |
| Controller als | keine | Alias für den Controller innerhalb der Vorlage |
| erfordern | keine | Ein weiterer Direktiven-Controller, der eingefügt werden soll; ^ sucht nach übergeordneten Direktiven, ^^ überspringt sich selbst, ? optional |
| Link | keine | Funktion pro Instanz: Gültigkeitsbereich, Element, Attribute, Controller, transcludeFn |
| kompilieren | keine | Wird einmalig auf der Vorlage ausgeführt, bevor ein Gültigkeitsbereich existiert. |
| transclude | falsch | Behält das ursprüngliche innere Markup für ng-transclude bei. |
| Prioritätsliste | 0 | Kompilierungsreihenfolge für ein gemeinsam genutztes Element; höhere Ausführungen zuerst. |
| Terminal | falsch | Unterbindet Direktiven mit niedrigerer Priorität für dieses Element. |
| ersetzen | falsch | Ersetzt das Element durch die Vorlage. Veraltet seit Version 1.3. |
💡 TIPP: Beginnen mit restrict, template und link. Hinzufügen scope zur Wiederverwendung controller und require für Direktiv-zu-Direktiv-Anrufe und verlassen priority und terminal allein.
