AngularJS-Einführungs-Tutorial – AngularJS-Anweisungen_AngularJS

WBOY

Freigeben： 2016-05-16 15:05:03

Original

1675 Leute haben es durchsucht

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Die

ng-app-Direktive teilt AngularJS mit, dass das aktuelle

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

Nach dem Login kopieren

Das obige Beispiel wird in den folgenden HTML-Code geparst

<ul>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

Nach dem Login kopieren

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>

Nach dem Login kopieren

wird in den folgenden HTML-Code geparst:

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Das obige Beispiel wird wie folgt analysiert:

Benutzerdefinierte Anweisungen!

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>"
};
});

Nach dem Login kopieren

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!