Freunde, die mit HTML vertraut sind, wissen, dass HTML viele Attribute hat. Beispielsweise kann das href-Attribut des -Tags verwendet werden, um die URL-Adresse des Links anzugeben, und das type-Attribut des -Tags kann verwendet werden, um die Art der Eingabe anzugeben. AngularJS-Direktiven fügen AngularJS-Anwendungen Funktionalität hinzu, indem sie HTML-Attribute erweitern.
AngularJS-Direktiven werden zum Erweitern von HTML verwendet. Dies sind spezielle Eigenschaften, die mit dem Präfix ng- beginnen. Wir werden die folgenden Richtlinien besprechen:
Gemeinsame AngularJS-Befehle
Dieng-app-Direktive initialisiert eine AngularJS-Anwendung.
Die ng-init-Direktive initialisiert Anwendungsdaten.
Dieng-model-Direktive bindet Elementwerte (z. B. den Wert eines Eingabefelds) an die Anwendung.
NG-App-Richtlinie
Dieng-app-Direktive startet eine AngularJS-Anwendung. Es definiert das Wurzelelement. Es initialisiert oder startet automatisch die Anwendung, die die Webseite lädt, die die AngularJS-Anwendung enthält. Es wird auch verwendet, um verschiedene AngularJS-Module in AngularJS-Anwendungen zu laden. Im folgenden Beispiel definieren wir die Standard-AngularJS-Anwendung mithilfe des ng-app-Attributs des div-Elements.
<div ng-app=""> ... </div>
ng-init-Befehl
Die ng-init-Direktive initialisiert die Daten einer AngularJS-Anwendung. Es wird verwendet, um Werte in Variablen einzugeben, die in Anwendungen verwendet werden. Im folgenden Beispiel initialisieren wir das Länder-Array. Verwenden Sie die JSON-Syntax, um das Länder-Array zu definieren.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>ng-model-Direktive
ng-model-Direktive definiert Modelle/Variablen, die in AngularJS-Anwendungen verwendet werden. Im folgenden Beispiel definieren wir ein Modell mit dem Namen „name“.
<div ng-app=""> ... <p>Enter your Name: <input type="text" ng-model="name"></p> </div>
ng-repeat-Anweisung
Dieng-repeat-Direktive wiederholt jedes Element in einer Sammlung von HTML-Elementen. Im folgenden Beispiel haben wir die Array-Länder durchlaufen.
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>Beispiel für eine AngularJS-Direktive
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div> ng-app-Direktive teilt AngularJS mit, dass das aktuelle
Achtung
Eine Webseite kann mehrere AngularJS-Anwendungen enthalten, die in verschiedenen Elementen ausgeführt werden.
Es ist nicht sehr üblich, ng-init zum Initialisieren von Daten zu verwenden. In den folgenden Kapiteln erfahren Sie, wie Sie Daten besser initialisieren können.
ng-repeat-Anweisung
Die ng-repeat-Direktive wiederholt ein HTML-Element, was der Each-Schleife in JavaScript entspricht
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>Das obige Beispiel wird in den folgenden HTML-Code geparst
<ul> <li>Jani</li> <li>Hege</li> <li>Kai</li> </ul>
ng-repeat funktioniert mit dem Objektarray:
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>wird in den folgenden HTML-Code geparst:
<ul> <li>Jani, Norway</li> <li>Hege, Sweden</li> <li>Kai, Denmark</li> </ul>
Individuelle Anleitung
Zusätzlich zu den integrierten Direktiven von AngularJS können wir auch benutzerdefinierte Direktiven erstellen. Sie können benutzerdefinierte Anweisungen mithilfe der Funktion .directive hinzufügen. Um eine benutzerdefinierte Direktive aufzurufen, muss der Name der benutzerdefinierten Direktive zum HTMl-Element hinzugefügt werden. Verwenden Sie „camelCase“, um eine Direktive „askh5Directive“ zu benennen. Bei der Verwendung müssen diese jedoch durch „askh5-directive
“ getrennt werden
<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>Das obige Beispiel wird wie folgt analysiert:
Anweisungen können auf folgende Arten aufgerufen werden:
Elementname:
Attribut:
Klassenname:
Kommentar:
Nutzung einschränken
Einschränkungswert kann der folgende sein:
E kann nur in Elementnamen verwendet werden
A nur für Attribute verfügbar
C kann nur mit Klassennamen verwendet werden
M nur für Kommentare
Der Standardwert von „restrict“ ist EA, d. h. die Anweisung kann über den Elementnamen und den Attributnamen aufgerufen werden.
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});AngularJS oben lässt nur Eigenschaftsaufrufe zu.
Verwandte Lektüre:
AngularJS-Einführungs-Tutorial – AngularJS-Ausdrücke
Der obige Inhalt ist die AngularJS-Anleitung des vom Herausgeber eingeführten AngularJS-Einführungs-Tutorials. Ich hoffe, dass es für alle hilfreich ist!
