Integrierte AngularJS-Direktive_AngularJS-js-Tutorial-php.cn

Integrierte AngularJS-Direktive_AngularJS

WBOY

Freigeben： 2016-05-16 16:16:06

Original

1269 Leute haben es durchsucht

-Direktive, ich verstehe sie als eine Möglichkeit für AngularJS, HTML-Elemente zu bedienen.
Da der erste Schritt beim Erlernen von AngularJS darin besteht, die integrierte Direktive ng-app zu schreiben, um anzugeben, dass dieser Knoten der Stammknoten der Anwendung ist, ist die Direktive bereits vertraut.

In diesem Blog werden einige integrierte Befehle kurz beschrieben. Lassen Sie uns sie zuerst verwenden und dann über einige interessante Dinge sprechen.

Eingebaute Befehle

Allen integrierten Anweisungen wird ng vorangestellt. Es wird nicht empfohlen, dieses Präfix für benutzerdefinierte Anweisungen zu verwenden, um Konflikte zu vermeiden.
Beginnen Sie mit einigen gängigen integrierten Befehlen.
Lassen Sie uns zunächst einige wichtige integrierte Anweisungen auflisten und kurz auf Umfangsprobleme eingehen.

ng-model

Das Binden des Formularsteuerelements an die Eigenschaften des aktuellen Bereichs scheint nicht korrekt zu sein.
Aber machen Sie sich vorerst keine Gedanken über die Formulierung, sie ist leicht zu verstehen, wenn Sie sie verwenden, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

ng-init

Diese Direktive initialisiert beim Aufruf den inneren Bereich.
Dieser Befehl erscheint normalerweise in relativ kleinen Anwendungen, wie z. B. einer Demo oder ähnlichem...

Code kopieren Der Code lautet wie folgt:

Ich bin ein/e {{Job}}

Zusätzlich zu ng-init haben wir mehr und bessere Optionen.

ng-app

Jedes Mal, wenn Sie AngularJS verwenden, können Sie auf diesen Befehl übrigens nicht verzichten: $rootScope.
Das Element, das ng-app deklariert, wird zum Startpunkt von $rootScope, und $rootScope ist die Wurzel der Bereichskette, die normalerweise in deklariert wird.
Mit anderen Worten: Alle Bereiche unter dem Stammverzeichnis können darauf zugreifen.
Es wird jedoch nicht empfohlen, $rootScope übermäßig zu verwenden, da sonst überall globale Variablen vorhanden sind, was ineffizient und schwierig zu verwalten ist.
Hier ist ein Beispiel:

Code kopieren Der Code lautet wie folgt:

{{ someProperty }}



<script><br>
var myApp = angle.module('myApp', [])<br>
.run(function($rootScope) {<br>
$rootScope.someProperty = 'Hallo Computer';<br>
}); <br>
</script>

ng-controller

Wir verwenden diesen Befehl, um einen Controller auf einem DOM-Element zu installieren.
Ein Controller? Tatsächlich ist es gut, es wörtlich zu verstehen. Warum brauchen wir also einen Controller? Denken Sie daran, dass Sie in AngularJS 1.2.x einen Controller wie folgt definieren können...

Code kopieren Der Code lautet wie folgt:

Funktion ohMyController($scope) {

//...

}

Diese Methode ist in AngularJS 1.3.x verboten, da diese Methode dazu führt, dass die Controller über den ganzen Himmel fliegen und es unmöglich ist, die Ebenen zu unterscheiden. Alles hängt an $rootScope...

ng-controller muss einen Ausdruck als Parameter haben. Darüber hinaus wird $scope verwendet, um die Methoden und Eigenschaften des übergeordneten $scope zu erben, einschließlich $rootScope.
Das Folgende ist nur ein einfaches Beispiel. Der Vorfahre kann nicht auf den Bereich des Kindes zugreifen.

Code kopieren Der Code lautet wie folgt:

Das Problem des Umfangs geht darüber hinaus. Lassen Sie uns es zunächst beiseite legen und uns weiterhin mit anderen integrierten Anweisungen befassen.

ng-form

Zuerst verstand ich nicht, warum es einen Formularbefehl gab, aber das

ng-deaktiviert

Für Attribute wie dieses, die wirksam sind, solange sie angezeigt werden, können wir sie wirksam machen, indem wir Wahr/Falsch-Ausdrücke in AngularJS zurückgeben.
Formulareingabefelder deaktivieren.

Code kopieren Der Code lautet wie folgt:

ng-readonly

Setzen Sie das Formulareingabefeld über den Ausdrucksrückgabewert wahr/falsch auf schreibgeschützt.
Beispielsweise wird es nach 3 Sekunden schreibgeschützt.

Code kopieren Der Code lautet wie folgt:

.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
$rootScope.stopTheWorld = true;
},3000)
})

ng-geprüft

Dies gilt für , wie zum Beispiel...

Code kopieren Der Code lautet wie folgt:

ng-selected

wird für die

ng-show/ng-hide

HTML-Elemente basierend auf Ausdrücken anzeigen/ausblenden, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

1 1=2

Du kannst mich nicht sehen.

ng-change

Es ist nicht onXXX wie HTML, sondern ng-XXX.
Nehmen Sie in Verbindung mit ng-model ng-change als Beispiel:

Code kopieren Der Code lautet wie folgt:

{{ calc.result }}

oder wie ng-options

{{}}

Tatsächlich ist dies auch ein Befehl. Es fühlt sich möglicherweise ähnlich an wie ng-bind, wird jedoch möglicherweise angezeigt, wenn das Rendern der Seite etwas langsam ist.
Darüber hinaus ist die Leistung von {{}} weitaus schlechter als die von ng-bind, aber die Verwendung ist sehr praktisch.

ng-bind

Das Verhalten von ng-bind ähnelt dem von {{}}, mit der Ausnahme, dass wir diesen Befehl verwenden können, um FOUC (Flash Of Unrendered Content) zu vermeiden, das durch das Nichtrendering verursachte Flimmern entsteht.

ng-Umhang

ng-cloak kann auch FOUC für uns lösen. ng-cloak verbirgt interne Elemente, bis die Route die entsprechende Seite aufruft.

ng-if

Wenn der Ausdruck in ng-if falsch ist, wird das entsprechende Element aus dem DOM entfernt statt ausgeblendet, aber wenn Sie das Element untersuchen, können Sie sehen, dass der Ausdruck zu einem Kommentar wird.
Wenn die Phase ausgeblendet ist, können Sie ng-hide verwenden.

Code kopieren Der Code lautet wie folgt:

Das Element kann nicht überprüft werden 

Kann zensiert werden

ng-switch

Alleine verwendet ist es bedeutungslos. Hier ist ein Beispiel:

Code kopieren Der Code lautet wie folgt:

ng-repeat

Ich verstehe nicht, warum es nicht „iterieren“ heißt, es durchläuft die Sammlung und generiert Vorlageninstanzen für jedes Element. Im Umfang jeder Instanz können einige spezielle Attribute verwendet werden:

Code kopieren Der Code lautet wie folgt:

$index

$first

$last

$mitte

sogar

seltsam

Keine Erklärung, es ist leicht zu erkennen, wozu diese dienen. Hier ist ein Beispiel:

Code kopieren Der Code lautet wie folgt:

{{char.alphabet}}

ng-href

Zuerst habe ich ein NG-Modell in einem Textfeld erstellt und dann in das href geschrieben.
Tatsächlich gibt es keinen Unterschied zwischen href und ng-href, also können wir Folgendes versuchen:

Code kopieren Der Code lautet wie folgt:

{{linkText}}

Sie kann angeklickt werden, aber es ist möglicherweise nicht die richtige Adresse

.run(function($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

Im Großen und Ganzen das Gleiche, das heißt, laden Sie die Ressource nicht, bevor der Ausdruck wirksam wird.
Beispiel (ps: schönes Bild! ):

Code kopieren Der Code lautet wie folgt:

.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})

ng-Klasse

Ändern Sie den Klassenstil dynamisch mithilfe von Objekten im Gültigkeitsbereich, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

.red {Hintergrundfarbe: rot;}
.blue {Hintergrundfarbe: blau;}

Nummer ist: {{ x }}

.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = function() {
$scope.x = new Date().getSeconds();
};
})

Das Obige ist der gesamte in diesem Artikel beschriebene Inhalt. Ich hoffe, dass er Ihnen allen gefällt.