AngularJS Directives

AngularJS erweitert HTML durch sogenannteDirektivenneue Attribute.

AngularJS fügt Anwendungen durch integrierte Direktiven Funktionalität hinzu.

AngularJS ermöglicht es Ihnen, benutzerdefinierte Direktiven zu definieren.

AngularJS-Direktiven

AngularJS-Direktiven sind erweiterte HTML-Attribute mit einem Präfix.ng-。

ng-appDie Direktive initialisiert eine AngularJS-Anwendung.

ng-initDie Direktive initialisiert Anwendungsdaten.

ng-modelDie Direktive bindet Elementwerte (wie den Wert eines Eingabefelds) an die Anwendung.

Den vollständigen Inhalt zu Direktiven finden Sie imAngularJS Referenzhandbuch。

AngularJS-Beispiel

<div ng-app="" ng-init="firstName='John'"> <p>Versuchen Sie, in das Eingabefeld zu tippen:</p> <p>Name:<input type="text" ng-model="firstName"></p> <p>Ihre Eingabe war: {{ firstName }}</p> </div>

Selbst ausprobieren »

ng-appDie Direktive teilt AngularJS mit, dass das <div>-Element der „Eigentümer“ der AngularJS-Anwendungist.

Datenbindung

Im obigen Beispiel ist der Ausdruck{{ firstName }}ein AngularJS-Datenbindungsausdruck.

Die Datenbindung in AngularJS synchronisiert AngularJS-Ausdrücke mit AngularJS-Daten.

{{ firstName }}Die Synchronisierung erfolgt überng-model="firstName".

Im nächsten Beispiel werden zwei Textfelder über zwei ng-model-Direktiven synchronisiert:

AngularJS-Beispiel

<div ng-app="" ng-init="quantity=1;price=5"> <h2>Preisrechner</h2>Menge:<input type="number" ng-model="quantity">Preis:<input type="number" ng-model="price"> <p><b>Gesamt:</b> {{ quantity * price }}</p> </div>

Selbst ausprobieren »

Note Die Verwendung vonng-initist nicht sehr üblich. Sie werden im Kapitel über Controller eine bessere Möglichkeit kennenlernen, Daten zu initialisieren.

HTML-Elemente wiederholen

ng-repeatDie Direktive wiederholt ein HTML-Element:

AngularJS-Beispiel

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>Verwenden Sie ng-repeat, um ein Array zu durchlaufen</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>

Selbst ausprobieren »

ng-repeatDie Direktive wird auf ein Array von Objekten angewendet:

AngularJS-Beispiel

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>Über Objekte schleifen:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>

Selbst ausprobieren »

Note AngularJS unterstützt Datenbank-CRUD-Anwendungen (Erstellen, Lesen, Aktualisieren, Löschen) perfekt.
Betrachten Sie die Objekte im Beispiel als Datensätze in einer Datenbank.

ng-app-Direktive

ng-appDie Direktive definiert dasWurzelelement der AngularJS-Anwendung.。

ng-appDie Direktive wird, wenn die Seite fertig geladen ist, die Anwendungautomatisch bootstrappen(automatisch initialisieren).

Später lernen Sie,ng-appwie Sie mithilfe eines Werts (wie ng-app="myModule") eine Verbindung zu einem Codemodul herstellen.

ng-init-Direktive

ng-initDie Direktive definiert für die AngularJS-AnwendungInitialwerte.。

Normalerweise wird ng-init nicht verwendet. Stattdessen verwenden Sie einen Controller oder ein Modul.

Später erfahren Sie mehr über Controller und Module.

ng-model-Direktive

ng-modelDie Direktivebindet HTML-Elementean Anwendungsdaten.

ng-modelDirektiven können außerdem:

  • Typvalidierung für Anwendungsdaten bereitstellen (number, email, required).
  • Zustand für Anwendungsdaten bereitstellen (invalid, dirty, touched, error).
  • CSS-Klassen für HTML-Elemente bereitstellen.
  • HTML-Elemente an HTML-Formulare binden.

ng-repeat-Direktive

ng-repeatFür jedes Element in einer Sammlung (Array) wird die Direktivedas HTML-Element einmal klonen.。


Benutzerdefinierte Direktiven erstellen

Zusätzlich zu den in AngularJS integrierten Direktiven können wir auch benutzerdefinierte Direktiven erstellen.

Sie können die.directive-Funktion verwenden, um benutzerdefinierte Direktiven hinzuzufügen.

Um eine benutzerdefinierte Direktive aufzurufen, müssen Sie den Namen der benutzerdefinierten Direktive zum HTML-Element hinzufügen.

Verwenden Sie camelCase, um eine Direktive zu benennen, exampleDirective, aber bei der Verwendung müssen Sie es-mit - trennen,example-directive:

AngularJS-Beispiel

<body ng-app="myApp">

<example-directive></example-directive>

<script>
var app = angular.module("myApp", []);
app.directive("exampleDirective", function() {
    return {
template : "<h1>Benutzerdefinierte Direktive!</h1>"
    };
});
</script>

</body>

Selbst ausprobieren »

Sie können eine Direktive auf folgende Weise aufrufen:

  • Elementname
  • Attribute
  • Klassenname
  • Kommentar

Die folgenden Beispiele können ebenfalls dasselbe Ergebnis erzeugen:

Elementname

<example-directive></example-directive>

Selbst ausprobieren »

Attribute

<div example-directive></div>

Selbst ausprobieren »

Klassenname

<div class="example-directive"></div>

Selbst ausprobieren »

Kommentar

<!-- directive: example-directive -->

Selbst ausprobieren »

Verwendungsbeschränkungen

Sie können Ihre Direktive so einschränken, dass sie nur durch bestimmte Methoden aufgerufen werden kann.

Beispiel

Indem Sie dasrestrict-Attribut hinzufügen und seinen Wert auf"A", um die Direktive so festzulegen, dass sie nur über ein Attribut aufgerufen werden kann:

var app = angular.module("myApp", []);
app.directive("exampleDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Benutzerdefinierte Direktive!</h1>"
    };
});

Selbst ausprobieren »

restrictDer Wert kann einer der folgenden sein:

  • EWird als Elementname verwendet
  • AWird als Attribut verwendet
  • CWird als Klassenname verwendet
  • MWird als Kommentar verwendet

restrictDer Standardwert istEA, was bedeutet, dass die Direktive durch Elementnamen und Attributnamen aufgerufen werden kann.

Weitere Erweiterungen