Richtlinie, ich verstehe es als Möglichkeit für AngularJs, HTML -Elemente zu manipulieren.
Da der erste Schritt zum Lernen von AngularJS darin besteht, die integrierte Anweisung NG-App zu schreiben, um anzuzeigen, dass der Knoten der Stammknoten der Anwendung ist, sind bereits bekannt.
Dieses Protokoll erfasst einfach einige integrierte Anweisungen, benutze es zuerst und spricht dann über einige interessante Dinge.
Integrierte Befehle
Alle integrierten Richtlinien haben NG-Präfixe, und es wird nicht empfohlen, dieses Präfix für benutzerdefinierte Anweisungen zu verwenden, um Konflikte zu vermeiden.
Beginnen Sie mit einigen gängigen integrierten Anweisungen.
Listen Sie zunächst einige integrierte wichtige Anweisungen auf und sprechen Sie kurz über Umfangsprobleme.
NG-Modell
Diese Erklärung scheint bei der Bindung der Formregelung an die Eigenschaften des aktuellen Bereichs nicht korrekt zu sein.
Aber mach dir keine Sorgen, zäh zu sein, es ist leicht zu verstehen, wenn sie verwendet werden, zum Beispiel:
Die Codekopie lautet wie folgt:
<Eingabe type = "text" ng-model = "somemodel.someProperty" /> <br>
{{somemodel.someProperty}}
ng-init
Diese Richtlinie wird als initialisierter interner Bereich bezeichnet.
Diese Anweisung erscheint normalerweise in kleineren Anwendungen, z. B. in einer Demo oder so etwas ...
Die Codekopie lautet wie folgt:
<div ng-init = "Job = 'Fighter'">
Ich bin a/an {{Job}}
</div>
Neben NG-Init haben wir mehr und bessere Optionen.
ng-App
Jedes Mal, wenn Sie AngularJs verwenden, ist dieser Befehl untrennbar mit ihm verbunden. Übrigens ist $ rootscope enthalten.
Deklariert das NG-App-Element zum Ausgangspunkt von $ rootscope, der die Wurzel der Bereichskette ist, die normalerweise in <html> deklariert wird, die Sie verstehen.
Das heißt, es kann durch den Bereich unter der Wurzel zugreifen.
Es wird jedoch nicht empfohlen, $ rootscope zu überbeanspruchen, um zu vermeiden, dass globale Variablen über den ganzen Himmel fliegen, wodurch die Effizienz schlecht und schwer zu verwalten ist.
Hier ist ein Beispiel:
Die Codekopie lautet wie folgt:
<html ng-App = "MyApp">
<body>
{{smileProperty}}
</body>
<Script>
var myapp = angular.module ('myapp', [])
.run (Funktion ($ rootscope) {
$ rootscope.someProperty = 'Hallo Computer';
});
</script>
</html>
ng-controller
Wir verwenden diesen Befehl, um Controller in einem DOM -Element zu installieren.
Ein Controller? In der Tat ist es gut, dies wörtlich zu verstehen. Warum brauchen wir also einen Controller?
Denken Sie daran, dass Sie, wenn AngularJS 1.2.x, auch solche Controller definieren können ...
Die Codekopie lautet wie folgt:
Funktion ohmyController ($ scope) {
// ...
}
Diese Methode ist in AngularJS 1.3.x verboten, da diese Methode Controller über den ganzen Himmel fliegen lässt und Sie den Unterschied zwischen den Levels nicht erkennen können und alles an $ rootscope hängt ...
Der NG-Controller muss einen Ausdruck als Parameter haben, und außerdem werden die Methoden und Eigenschaften des vorherigen $ Scope durch $ Scope geerbt und $ rootscope ist ebenfalls enthalten.
Das Folgende ist nur ein einfaches Beispiel, der Vorfahr kann nicht auf den Umfang des Kindes zugreifen.
Die Codekopie lautet wie folgt:
<div ng-controller = "AncestorController">
{{Ancestorname}}
{{childname}}
<div ng-controller = "ChildController">
{{Ancestorname}}
{{childname}}
</div>
</div>
<Script>
var myapp = angular.module ('myapp', [])
.Controller ('ChildController', Funktion ($ scope) {
$ scope.childname = 'child';
})
.Controller ('AncestorController', Funktion ($ scope) {
$ scope.ancestorname = 'Vorfahr';
});
</script>
Das Umfangsproblem ist viel mehr als das. Lassen Sie es uns vorerst beiseite legen und weiterhin andere integrierte Anweisungen ansehen.
NG-Form
Zuerst habe ich nicht verstanden, warum es einen Formularbefehl gab und das <form> Tag genug anfühlte.
Als Beispiel ist eine Formüberprüfung. Im vorherigen Artikel befindet sich ein Code -Code:
Die Codekopie lautet wie folgt:
<Eingabe type = "Senden" ng-disabled = "MainForm. $ ungültig" />
Das heißt, wenn der Status des Formulars $ ungültig ist, ist die Schaltfläche "Senden" deaktiviert.
Wenn die Szene beispielsweise etwas komplizierter ist, gibt es mehrere untergeordnete Formulare in einem übergeordneten Formular, und das übergeordnete Formular kann eingereicht werden, wenn 3 des untergeordneten Formulars die Überprüfung bestehen.
<form> kann jedoch nicht verschachtelt werden.
In Anbetracht dieses Szenarios verwenden wir die NG-Form-Richtlinie, um dieses Problem zu lösen.
Zum Beispiel:
Die Codekopie lautet wie folgt:
<Formular name = "MainForm" Novalidat>
<div ng-form = "Form1">
Name: <Eingabe type = "text" ng-erregt = "true" ng-model = "name"/> <br>
ID-Nummer: <Eingabe type = "number" ng-minLength = "15" ng-maxLength = "18" ng-erregt = "true" ng-model = "idnum"/>
</div>
<br>
<div ng-form = "Form2">
Guardian Name: <Eingabe type = "text" ng-erregt = "true" ng-model = "gname"/> <br>
Guardian ID-Nummer: <Eingabe type = "Nummer" ng-minLength = "15" ng-maxLength = "18" ng-erregt = "true" ng-model = "gidnum"/>
</div>
<Schaltfläche ng-disabled = "Form1. $ Invalid && Form2. $ Ungültig"> Alle </button> senden
</form>
NG-Behinderung
Für solche Attribute wie diese, die so lange wirksam werden, können wir es in AngularJs wirksam machen, indem wir den Wert true/false durch den Ausdrucksrenditewert zurückgeben.
Formulareingangsfelder deaktivieren.
Die Codekopie lautet wie folgt:
<textArea ng-disabled = "1+1 == 2"> 1+1 =? </textArea>
ng-lesony
Setzen Sie das Formulareingangsfeld auf schreibgeschützte, indem Sie den Wert true/false durch den Ausdruck zurückgeben.
Machen Sie ein Beispiel und es wird nach 3 Sekunden schreibgeschützt.
Die Codekopie lautet wie folgt:
<input type = "text" ng-readonly = "stoptheworld" value = "Stop die Welt nach 3s"/>
.run (Funktion ($ rootscope, $ timeout) {
$ rootscope.StOptheWorld = false;
$ timeout (function () {
$ rootscope.StOptheWorld = true;
}, 3000)
})
NG-überprüft
Dies gilt für <Eingabe type = "Kontrollkästchen" /> wie ...
Die Codekopie lautet wie folgt:
<input type = "checkbox" ng-checked = "smloperty" ng-init = "smloperty = true" ng-model = "smloperty">
NG ausgewählt
Zur Verwendung mit <option> in <Select> Beispiel:
Die Codekopie lautet wie folgt:
<Label>
<input type = "checkbox" ng-model = "isFullStack">
Ich bin Full Stack Engineer
</label>
<Selech>
<OPTION> Front-End </Option>
<OPTION> Back-End </Option>
<option ng-ausgewählt = "isfullStack"> Voller Stack !!! </option>
</select>
ng-show/ng-hide
HTML -Elemente anzeigen/ausblenden gemäß dem Ausdruck, beachten Sie, dass es versteckt ist, beispielsweise nicht aus dem DOM entfernt wird:
Die Codekopie lautet wie folgt:
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
Du kannst mich nicht sehen.
</div>
Ng-Change
Es ist nicht HTMLs Onxxx oder so, sondern NG-XXX.
Verwenden Sie in Kombination mit NG-Model und nehmen Sie NG-Change als Beispiel:
Die Codekopie lautet wie folgt:
<Eingabe type = "text" ng-model = "calc.arg" ng-change = "calc.result = Calc.arg*2" />
<code> {{Calc.Result}} </code>
Oder zum Beispiel NG-Optionen
{{}}
Tatsächlich ist dies auch eine Richtlinie. Vielleicht fühlt es sich ähnlich wie NG-Bind an, aber es kann gesehen werden, wenn die Seite etwas langsamer wird.
Zusätzlich ist die Leistung von {{}} weit weniger als NG-Bind, aber es ist sehr bequem zu bedienen.
Ng-Bind
Das Verhalten von NG-Bind ist ähnlich wie {{}}, außer dass wir diese Anweisung verwenden können, um Fouc (Flash von nicht gebührenfreiem Inhalt) zu vermeiden, dh Flacker, die durch Unverschämtheit verursacht werden.
Ng-Clak
Ng-Clak kann auch Fouc für uns lösen. Ng-Clak verbirgt interne Elemente, bis die Route die entsprechende Seite aufruft.
Ng-wenn
Wenn der Ausdruck in NG-wenn falsch ist, wird das entsprechende Element aus dem DOM entfernt, anstatt versteckt zu werden. Wenn Sie jedoch das Element überprüfen, können Sie feststellen, dass der Ausdruck zu einem Kommentar wird.
Wenn die Phase versteckt ist, können Sie NG-Hide verwenden.
Die Codekopie lautet wie folgt:
<div ng-if = "1+1 === 3">
Dieses Element kann nicht überprüft werden
</div>
<div ng-hide = "1+1 == 2">
Kann überprüft werden
</div>
Ng-Switch
Es spielt keine Rolle, ob Sie es alleine verwenden. Hier sind Beispiele:
Die Codekopie lautet wie folgt:
<div ng-switch on = "1+1">
<p ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
NG-Wiederholung
Ich verstehe nicht, dass es nicht als iTerat bezeichnet wird. Kurz gesagt, es soll die Sammlung durchqueren und Vorlageninstanzen für jedes Element generieren. Einige spezielle Attribute können wie folgt im Bereich jeder Instanz verwendet werden:
Die Codekopie lautet wie folgt:
$ index
$ zuerst
$ last
$ Middle
Sogar
seltsam
Ohne es speziell erklären zu müssen, ist es leicht zu erkennen, wofür diese sind. Hier ist ein Beispiel:
Die Codekopie lautet wie folgt:
<ul>
<li ng-repeat = "char in
[{'Alphabet': 'K'},,
{'Alphabet': 'a'},,
{'Alphabet': 'V'},,
{'Alphabet': 'L'},,
{'Alphabet': 'e'},
{'Alphabet': 'Z'}] "ng-show =" $ sogar "> {{char.alphabet}} </li>
</ul>
ng-href
Zuerst habe ich in einem Textfeld ein NG-Modell gemacht und es dann in Href so geschrieben.
Tatsächlich gibt es keinen Unterschied zwischen HREF und NG-HREF, daher können wir Folgendes versuchen:
Die Codekopie lautet wie folgt:
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{{myhref}}"> {{linkText}} </a> </li>
<li> <a href = "{{myhref}}"> klicken, aber nicht unbedingt die richtige Adresse </a> </li>
</ul>
.run (Funktion ($ rootscope, $ timeout) {
$ rootscope.linkText = 'Noch nicht geladen, Sie können nicht klicken';
$ timeout (function () {
$ rootscope.linkText = 'Bitte klicken'
$ rootscope.myhref = 'http://google.com';
}, 2000);
})
ng-src
Das Gleiche gilt, dh die Ressource sollte nicht geladen werden, bevor der Ausdruck wirksam wird.
Beispiel (PS: Das Bild ist gut!):
Die Codekopie lautet wie folgt:
<img ng-src = "{{imgsrc}}"/>
.run (Funktion ($ rootscope, $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
NG-Klasse
Ändern Sie die Klassenstile dynamisch mit Objekten im Umfang, zum Beispiel:
Die Codekopie lautet wie folgt:
<Styles>
.Red {Hintergrundfarbe: rot;}
.Blue {Hintergrundfarbe: blau;}
</style>
<div ng-controller = "curTimeController">
<button ng-klick = "getCurrentsecond ()"> Zeit! </button>
<p ng-class = "{rot: x%2 == 0, blau: x%2! = 0}"> Zahl ist: {{x}} </p>
</div>
.Controller ('CurTimeController', Funktion ($ scope) {
$ scope.getCurrentsecond = function () {
$ scope.x = new Date (). GetEconds ();
};
})
Das obige Inhalt ist der in diesem Artikel beschriebene Inhalt. Ich hoffe, es gefällt Ihnen.