Ich habe ziemlich viel Zeit damit verbracht, die AngularJS-Dokumentation und mehrere Tutorials durchzulesen, und ich war ziemlich überrascht, wie unnahbar die Dokumentation ist.
Ich habe eine einfache, beantwortbare Frage, die auch für andere nützlich sein kann, die AngularJS lernen möchten:
Was ist eine AngularJS-Direktive?
Es sollte irgendwo eine einfache, genaue Definition einer Richtlinie geben, aber die AngularJS-Website bietet diese überraschend nutzlosen Definitionen:
Direktiven sind eine einzigartige und leistungsstarke Funktion, die in AngularJS verfügbar ist. Mit Direktiven können Sie eine neue HTML-Syntax erfinden, die für Ihre Anwendung spezifisch ist.
In der Entwicklerdokumentation :
Direktiven sind eine Möglichkeit, HTML neue Tricks beizubringen. Während der DOM-Kompilierung werden Direktiven mit dem HTML-Code abgeglichen und ausgeführt. Dadurch können Anweisungen das Verhalten registrieren oder das DOM transformieren.
Und es gibt eine Reihe von Gesprächen über Richtlinien, die ironischerweise davon ausgehen, dass das Publikum bereits versteht, was sie sind.
Wäre jemand in der Lage, als eindeutige Referenz eine genaue Definition einer Richtlinie anzubieten, die erklärt:
- Was es ist (siehe die klare Definition von jQuery als Beispiel)
- Welche praktischen Probleme und Situationen sollen angegangen werden?
- Welches Designmuster es verkörpert oder alternativ, wie es in die angebliche MVC / MVW- Mission von AngularJS passt .
quelle
Antworten:
Eine Direktive ist im Wesentlichen eine Funktion † , die ausgeführt wird, wenn der Angular-Compiler sie im DOM findet. Die Funktion (en) können fast alles, weshalb ich denke, dass es ziemlich schwierig ist zu definieren, was eine Direktive ist. Jede Direktive hat einen Namen (wie ng-repeat, tabs, make-up-your-own) und jede Direktive bestimmt, wo sie verwendet werden kann: Element, Attribut, Klasse, in einem Kommentar.
† Eine Direktive hat normalerweise nur eine (Post-) Link-Funktion. Eine komplizierte Direktive könnte eine Kompilierungsfunktion, eine Vorverknüpfungsfunktion und eine Nachverknüpfungsfunktion haben.
Das Mächtigste, was Direktiven tun können, ist, HTML zu erweitern. Ihre Erweiterungen sind eine domänenspezifische Sprache ( Domain Specific Language, DSL) zum Erstellen Ihrer Anwendung. Wenn Ihre Anwendung beispielsweise eine Online-Shopping-Site ausführt, können Sie HTML um Direktiven für "Warenkorb", "Gutschein", "Sonderangebote" usw. erweitern - unabhängig davon, welche Wörter, Objekte oder Konzepte in der ". Online-Shopping-Domain statt "div" und "span" (wie bereits erwähnt @WTK).
Direktiven können auch HTML komponieren - gruppieren Sie eine Reihe von HTML in eine wiederverwendbare Komponente. Wenn Sie ng-include verwenden, um viel HTML abzurufen, ist es wahrscheinlich an der Zeit, die Anweisungen umzugestalten.
In Direktiven können Sie das DOM bearbeiten und DOM-Ereignisse abfangen. Aus diesem Grund erhalten die Kompilierungs- und Verknüpfungsfunktionen der Direktive beide das "Element" als Argument. Sie können
In HTML haben wir Dinge wie
<a href="...">
,<img src="...">
,<br>
,<table><tr><th>
. Wie würden Sie beschreiben, was a, href, img, src, br, table, tr und th sind? Das ist eine Richtlinie.quelle
<!-- directive: my-directive exp -->
<div></div>
eine Richtlinie? Du sagtest ja. Hier gibt es jedoch keine Dekoration (über Element, Klasse, Kommentar, Attribut). Die Leute hier sagen, dass dies neue Markierungen für ein HTML-DOM sind . Könntest Du das erläutern ? (Ich spreche nicht über die Ursache, wo Sie eine Direktive für ein einfaches Element wie erstellen können<div>
)Vielleicht wäre eine wirklich einfache und anfängliche Definition für Winkelanweisungen
Einige Beispiele hierfür wären
Überprüfen Sie dieses Tutorial, zumindest für mich war es eine der besten Einführungen in Angular. Ein vollständigerer Ansatz wäre alles, was @ mark-rajcok zuvor gesagt hat.
quelle
In der Dokumentation sind Direktiven Strukturen, die Sie schreiben können, die anglejs analysiert, um Objekte und Verhaltensweisen zu erstellen. Mit anderen Worten, es handelt sich um eine Vorlage, in der Sie eine Mischung aus beliebigen Knoten und Pseudo-Javascript und Platzhaltern für Daten verwenden, um die Absichten auszudrücken, wie Ihr Widget (Komponente) ist strukturiert, wie es sich verhält und wie es mit Daten gespeist wird. Angularjs läuft dann gegen diese Anweisungen , um sie in funktionierenden HTML / Javascript-Code zu übersetzen.
Anweisungen dienen dazu, komplexere Komponenten (Widgets) mithilfe der richtigen Semantik zu erstellen. Schauen Sie sich einfach das eckige Beispiel für Direktiven an - sie definieren den Registerkartenbereich (der in normalem HTML natürlich nicht gültig ist). Es ist intuitiver als die Verwendung von Divs oder Spannen, um eine Struktur zu erstellen, die dann so gestaltet ist, dass sie wie ein Registerkartenfenster aussieht .
quelle
In AngularJS-Direktiven sind HTML-Zeichen für ein HTML-DOM-Element wie ein Attribut (Restrict-A), ein Elementname (Restrict-E), ein Kommentar (Restrict-M) oder eine CSS-Klasse (Restrict-C), die den HTML-Compiler von AngularJS ($) angeben kompilieren), um ein bestimmtes Verhalten für dieses DOM-Element auszuführen oder sogar das DOM-Element und seine untergeordneten Elemente zu transformieren. Einige Beispiele sind ng-bind, ng-hide / show usw.
quelle
Die Homepage ist darüber sehr klar: Wenn Sie im letzten Abschnitt mit der Maus über die Registerkarten fahren:
Dann in der nächsten Registerkarte:
Sie können also HTML-Elemente erfinden, dh
tabs
das Rendern dieser Elemente durch Winkel ausführen lassen.quelle