AngularJS-Direktiven
Mit AngularJS können Sie HTML mit neuen Attributen erweitern, die als Direktiven bezeichnet werden .
AngularJS verfügt über eine Reihe integrierter Anweisungen, die Ihren Anwendungen Funktionalität bieten.
Mit AngularJS können Sie auch Ihre eigenen Anweisungen definieren.
AngularJS-Direktiven
AngularJS-Direktiven sind erweiterte HTML-Attribute mit dem Präfix ng-.
Die ng-appDirektive initialisiert eine AngularJS-Anwendung.
Die ng-initDirektive initialisiert Anwendungsdaten.
Die ng-modelDirektive bindet den Wert von HTML-Steuerelementen (input, select, textarea) an Anwendungsdaten.
Lesen Sie mehr über alle AngularJS-Direktiven in unserer AngularJS-Direktivenreferenz .
Beispiel
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Die ng-appDirektive teilt AngularJS auch mit, dass das <div>-Element der „Besitzer“ der AngularJS-Anwendung ist.
Datenbindung
Der {{ firstName }}Ausdruck im obigen Beispiel ist ein AngularJS-Datenbindungsausdruck.
Die Datenbindung in AngularJS bindet AngularJS-Ausdrücke an AngularJS-Daten.
{{ firstName }}ist mit gebunden ng-model="firstName".
Im nächsten Beispiel werden zwei Textfelder mit zwei ng-model-Direktiven zusammengebunden:
Beispiel
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
Die Verwendung ng-initist nicht sehr verbreitet. Wie Sie Daten initialisieren, erfahren Sie im Kapitel über Steuerungen.
Sich wiederholende HTML-Elemente
Die ng-repeatDirektive wiederholt ein HTML-Element:
Beispiel
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Die ng-repeatDirektive klont tatsächlich einmal HTML-Elemente
für jedes Element in einer Sammlung.
Die ng-repeatDirektive, die für ein Array von Objekten verwendet wird:
Beispiel
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS ist perfekt für Datenbank-CRUD-Anwendungen (Create Read Update Delete).
Stellen Sie sich vor, diese Objekte wären Datensätze aus einer Datenbank.
Die In-App-Richtlinie
Die ng-appDirektive definiert das Wurzelelement einer AngularJS-Anwendung.
Die ng-appDirektive wird die Anwendung automatisch booten (automatisch initialisieren), wenn eine Webseite geladen wird.
Die Wärmerichtlinie
Die ng-initDirektive definiert Anfangswerte für eine AngularJS-Anwendung.
Normalerweise werden Sie ng-init nicht verwenden. Sie verwenden stattdessen einen Controller oder ein Modul.
Später erfahren Sie mehr über Controller und Module.
Die Modellierungsrichtlinie
Die ng-modelDirektive bindet den Wert von HTML-Steuerelementen (input, select, textarea) an Anwendungsdaten.
Die ng-modelRichtlinie kann auch:
- Geben Sie eine Typvalidierung für Anwendungsdaten an (Nummer, E-Mail, erforderlich).
- Geben Sie den Status für Anwendungsdaten an (ungültig, schmutzig, berührt, Fehler).
- Stellen Sie CSS-Klassen für HTML-Elemente bereit.
- Binden Sie HTML-Elemente an HTML-Formulare.
Lesen Sie mehr über die ng-modelRichtlinie im nächsten Kapitel.
Neue Direktiven erstellen
Zusätzlich zu allen integrierten AngularJS-Direktiven können Sie Ihre eigenen Direktiven erstellen.
Neue Anweisungen werden mithilfe der .directiveFunktion erstellt.
Erstellen Sie zum Aufrufen der neuen Direktive ein HTML-Element mit demselben Tag-Namen wie die neue Direktive.
Wenn Sie eine Direktive benennen, müssen Sie einen Camel-Case-Namen verwenden
w3TestDirective, aber wenn Sie sie aufrufen, müssen Sie einen -getrennten Namen verwenden, w3-test-directive:
Beispiel
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Sie können eine Direktive aufrufen, indem Sie Folgendes verwenden:
- Elementname
- Attribut
- Klasse
- Kommentar
Die folgenden Beispiele führen alle zum gleichen Ergebnis:
Elementname
<w3-test-directive></w3-test-directive>
Attribut
<div w3-test-directive></div>
Klasse
<div class="w3-test-directive"></div>
Kommentar
<!-- directive: w3-test-directive -->
Beschränkungen
Sie können Ihre Anweisungen so einschränken, dass sie nur von einigen der Methoden aufgerufen werden.
Beispiel
Durch Hinzufügen einer restrictEigenschaft mit dem Wert "A"kann die Direktive nur von Attributen aufgerufen werden:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Die gesetzlichen Grenzwerte sind:
Efür ElementnameAfür AttributCfür KlasseMfür Kommentar
Standardmäßig ist der Wert EA, was bedeutet, dass sowohl Elementnamen als auch Attributnamen die Direktive aufrufen können.