AngularJS-Einführungs-Tutorial – AngularJS-Anweisungen_AngularJS

Freunde, die mit HTML vertraut sind, wissen, dass HTML viele Attribute hat. Beispielsweise kann das href-Attribut des 3499910bf9dac5ae3c52d5ede7383485-Tags verwendet werden, um die URL-Adresse des Links anzugeben, und das type-Attribut des d5fd7aea971a85678ba271703566ebfd-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

Die

ng-app-Direktive initialisiert eine AngularJS-Anwendung.

Die ng-init-Direktive initialisiert Anwendungsdaten.

Die

ng-model-Direktive bindet Elementwerte (z. B. den Wert eines Eingabefelds) an die Anwendung.

NG-App-Richtlinie

Die

ng-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

Die

ng-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> 

Die

ng-app-Direktive teilt AngularJS mit, dass das aktuelle dc6dce4a544fdca2df29d5ac0ea9906b-Element eine AngularJS-Anwendung ist. Die ng-init-Direktive wird zum Initialisieren von Daten verwendet, was der Definition von Variablen in JavaScript entspricht. Die Datenbindung in AngularJS synchronisiert AngularJS-Ausdrücke und AngularJS-Daten. {{ firstName }} wird über ng-model="firstName" synchronisiert. Im obigen Beispiel wird gleichzeitig der Inhalt angezeigt, den Sie in das Eingabefeld auf der Seite eingeben.

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:

4a249f0d628e2318394fd9b75b4636b1Benutzerdefinierte Anweisungen!473f0a7621bec819994bb5020d29372a

Anweisungen können auf folgende Arten aufgerufen werden:

Elementname: 6864244c5133c8be482ad78135864b813c099c703ad56dc8c4d20f130b6633bb

Attribut:215a28f1b197530e83ae97e8b7faab7416b28748ea4df4d9c2150843fecfba68

Klassenname:246c50ea82720d6a9056246ce10521a416b28748ea4df4d9c2150843fecfba68

Kommentar: 4065cf5ae2e0651a9bc7d165c985ff79

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!