Wenn es um AngularJs geht, ist das erste, woran wir denken, wahrscheinlich ein Zwei-Wege-Datenbindungs- und Anweisungssystem, das auch die attraktivsten Aspekte von AngularJs sind. In Bezug auf die Bindung von Zwei-Wege-Daten habe ich das Gefühl, dass es nichts zu sagen gibt. So werden wir heute kurz das Anweisungssystem des AngularJS -Frameworks diskutieren. Ich bin auch Anfänger und habe einige Informationen konsultiert. Wenn es einige schlechte Dinge gibt, wies Wan Wang darauf hin.
Richtlinien sind der wichtigste Teil von AngularJs, daher enthält dieses Rahmen selbst mehr Anweisungen, aber in der Entwicklung können diese Anweisungen normalerweise nicht unseren Anforderungen entsprechen, sodass wir auch einige Anweisungen anpassen müssen. Dann kann eine AngularJS -Anweisung im HTML -Code vier Ausdrucksformen haben:
1. Verwenden Sie als neues HTML -Element.
<Hello> </hello> oder <Hallo/>
2. Verwenden Sie als Attribut eines Elements
<div hallo> </div>
3.. Verwenden Sie als Elementklasse
<div> </div>
4.. Verwenden Sie als Kommentare
<!-Richtlinie: Hallo->
Beachten Sie, dass es hier eine Falle gibt, die nach "Richtlinie: Hallo" einen Raum haben soll, ansonsten wird sie nutzlos sein. Gleichzeitig wird empfohlen, weniger Annotationsmethoden anzuwenden. Wenn Sie hohe Qualität verfolgen müssen, dann seien Sie lässig. Wie definieren sie sie speziell, da die Anweisungen die oben genannten vier Ausdrucksformen haben?
.Directive ('Hello', function () {return {Einschränkung: 'Aecm', Vorlage: '<Buttons> Klicken Sie auf mich </button>'}})Das obige ist der einfachste Code, um eine Richtlinie zu definieren, ohne Zweifel. Im obigen Code definiert die Richtlinie () -Methode eine neue Anweisung. Die Methode hat zwei Parameter. Das erste 'Hallo' besteht darin, anzugeben, dass der Name der Anweisung Hallo ist, und der zweite Parameter ist die Funktion, die das Anweisungsobjekt zurückgibt. Im obigen Code verwendet die Funktion also hauptsächlich zwei Eigenschaften, um diese Hello -Richtlinie zu definieren:
1. Das Attribut für einschränkende [String] wird hauptsächlich verwendet, um anzugeben, welche Form von Ausdrücken im HTML -Code verwendet werden kann. A repräsentiert Attribute, E repräsentiert Elemente, C repräsentiert Klassen und M repräsentiert Kommentare. In tatsächlichen Situationen verwenden wir im Allgemeinen die beiden Methoden von AE.
2. Das Attribut der Vorlage [Zeichenfolge oder Funktion] Gibt das vom Befehl erzeugte HTML -Markup an, nachdem es nach dem Kompilieren und mit Angular verknüpft ist. Dieses Attribut kann so einfach sein wie nur ein HTML -Text im Inneren oder besonders komplex sein. Wenn der Wert des Attributs eine Funktion ist, gibt die Methode eine Zeichenfolge zurück, die die Vorlage darstellt, und der Ausdruck {{}} kann auch darin verwendet werden.
Vorlage: function () {return '<button> Klicken Sie auf mich </button>'; }Im Allgemeinen wird das Vorlagenattribut jedoch durch Templateurl ersetzt und wird verwendet, um auf eine externe Dateiadresse zu verweisen, sodass wir normalerweise die Vorlage in einer externen HTML -Datei platzieren und dann Templateurl verwenden, um darauf zu verweisen.
Bei der Definition von Anweisungen werden wir zusätzlich zu den beiden grundlegendsten Attributen auch viele andere Attribute verwenden. Lassen Sie uns also nacheinander darüber sprechen:
1. Prioritätsattribut [Nummer], dieses Attribut wird verwendet, um die Priorität benutzerdefinierter Anweisungen anzugeben. Wenn es mehr als eine Anweisung in einem DOM -Element gibt, müssen Sie die Priorität der Anweisungen vergleichen. Anweisungen mit höherer Priorität werden zuerst ausgeführt. Diese Priorität wird verwendet, um die Kompilierungsfunktion zu sortieren, bevor die Anweisung ausgeführt wird. Wir werden also unten sorgfältig über die Kompilierungsfunktion sprechen.
2. Terminal [boolean] Attribut wird verwendet, um zu definieren, ob Anweisungen für das aktuelle Element gestoppt werden sollen, die eine geringere Priorität haben als diese Anweisung. Wenn der Wert wahr ist, ist er normal. Es wird in der Reihenfolge der Priorität ausgeführt. Wenn es auf false eingestellt ist, werden Anweisungen zu dem aktuellen Element mit einer geringeren Priorität als dieser Anweisung nicht ausgeführt.
3. Das Attribut für das [booleale] Ersetzen. Dieses Attribut wird verwendet, um festzustellen, ob der generierte HTML -Inhalt das HTML -Element ersetzt, das diese Anweisung definiert. Wenn wir den Wert dieser Eigenschaft auf True festlegen, die Konsole öffnen und sie ansehen, werden Sie feststellen, dass das von dieser Anweisung generierte Element so aussieht:
Wenn wir uns auf false stellen, sieht es so aus:
.
4. Link [Funktion] Attribut. Im obigen Beispiel hat der von uns angepasste Befehl tatsächlich keine große Bedeutung. Dies ist nur der einfachste Befehl. Es gibt viele Attribute, die wir nicht dafür definiert haben, daher ist es nicht sehr nützlich. Diese Linkfunktion enthält beispielsweise drei Parameter: Umfang, Element und Attrs. Diese Linkfunktion wird hauptsächlich zum Hinzufügen von Ereignisüberwachung zu DOM -Elementen, Überwachung von Modellattributänderungen und Aktualisierung von DOM verwendet. Es hat drei Parameter:
1: Umfangsparameter. Wenn wir keine Bereichsattribute für die Anweisung definieren, repräsentiert es den Umfang des übergeordneten Controllers.
2: Der Elementparameter ist der JQLite (eine Teilmenge von JQuery) des Befehls zum Wickeln des DOM -Elements. Wenn Sie jQuery vor dem Einführen von AngularJs vorgestellt haben, ist dieses Element das JQuery -Element, nicht das JQLite -Element. Da dieses Element von JQuery/JQLite eingepackt wurde, müssen wir bei DOM -Operationen nicht mehr $ () verwendet werden, um es zu verpacken.
Drei: Der Parameter ATTRS, der das standardisierte Parameterobjekt der Attribute des Elements enthält, in dem sich die Direktive befindet.
5. Das Attribut „Boolean oder Objekt] wird verwendet, um den Umfang der Anweisung zu definieren. Es ist standardmäßig falsch. Das heißt, die Anweisung erbt den Umfang des übergeordneten Controllers. Sie können die Attribute im Bereich des übergeordneten Controllers nach Belieben verwenden, aber auf diese Weise verschmutzen sie die Attribute im übergeordneten Bereich, was nicht ratsam ist. So können wir die folgenden zwei Werte nehmen: True und {}.
Wenn es wahr ist, bedeutet dies, dass Angular einen Bereich erzeugt, der aus dem übergeordneten Bereich für die Anweisung geerbt wird.
var myapp=angular.module('myapp',[]) .controller('myctrl',['$scope', function ($scope) { $scope.color='red'; }]) .directive('hello', function () { return{ restrict:'AECM', replace:true, template:'<button ng-click="sayhello()" style = "background-color: {{{color}}"> klicken Sie mich </button> ', Scope: true, link: function (Scope, Elements, Attrs) {Elements.bind (' klick ', function () {Elements.css (' Background-Color ',' Blue ');})}}}}}))Hier definieren wir ein Farbattribut für das übergeordnete Bereich und weisen es rot zu. Im Bereich des Geltungsmerkmals der Hello -Richtlinie geben wir wahr, so dass Angular ein Zielfernrohr erstellt, das aus dem übergeordneten Umfang für diese Richtlinie geerbt wird. Im Vorlagenattribut verwenden wir dann {{}}, um das aus dem übergeordnete Bereich geerbte Farbattribut zu verwenden, sodass die Schaltfläche rot ist.
Wenn {}, bedeutet dies, dass ein isolierter Bereich erstellt wird und die Eigenschaften des übergeordneten Bereichs nicht vererbt werden. Aber manchmal müssen wir auch auf die Eigenschaften oder Methoden im Elternbereich zugreifen. Was sollen wir also tun? Angular hat lange daran für uns gedacht. Es gibt drei Möglichkeiten, sich an die oben genannten Operationen zu erinnern:
1: Verwenden Sie @, um eine Einwegbindung zu implementieren. Wenn wir nur diesen {} -Werwert geben, ist die Hintergrundfarbe der Schaltfläche im obigen Code grau. Und wenn wir das Farbattribut des übergeordneten Umfangs verwenden müssen, können wir Folgendes schreiben:
Scope {color: '@color'} <Hallo color = "{{color}}"> </hello>Hier gibt es zwei Punkte zu beachten: 1. Die Eigenschaftsfarbe im Umfang repräsentiert die Farbe im Ausdruck {{}}, und die beiden müssen konsistent sein. 2. Der Wert der Attributfarbe im Bereich, dh die Farbe nach @, repräsentiert die Attributfarbe im folgenden HTML -Element, sodass die beiden ebenfalls konsistent sein müssen. Wenn der Attributname hier der gleiche wie der im Ausdruck {{}} in der Vorlage verwendete Name ist, kann der Attributname nach @ in der folgenden Form weggelassen und geschrieben werden.
Scope {color: '@'}Aus dem Wert des Umfangs in der Anweisung ist ersichtlich, dass die Farbe im Ausdruck {{}} in der Befehlsvorlage auf das Farbattribut des aktuellen Elementelements verweist, und der Wert dieses Farbattributs ist der Wert der Eigenschaftsfarbe des übergeordneten Bereichs. Das übergeordnete Bereich übergibt seinen Farbattributwert an das Farbattribut des aktuellen Elements, und dann übergibt das Farbattribut den Wert an die Farbe im Ausdruck in der Vorlage. Dieser Vorgang ist Einweg.
Zwei: Verwenden = Um die Zwei-Wege-Bindung zu implementieren
.directive('hello', function () { return{ restrict:'AECM', replace:true, template:'<button style="background-color: {{color}}">click me</button>', scope:{ color:'=' }, link: function (scope,elements,attrs) { elements.bind('click', function () { Elements.css ('Hintergrund-Color', 'Blue');<Hallo color = "color"> </hello> <Eingabe type = "text" ng-model = "color"/>
Hier haben wir ein Zwei-Wege-Bindung des Farbattributs im Bereich der Anweisung und das Farbattribut im übergeordneten Umfang und fügen der Linkfunktion des Anweisungen ein Klickereignis hinzu. Wenn Sie auf die Schaltfläche klicken, wird die Farbe der Schaltfläche geändert, den Wert des Farbattributs des Befehlsbereichs und dann ein Eingabetag zur HTML -Seite, die Ausgabe oder eingeben Sie den Wert des Farbattributs des übergeordneten Umfangs hinzu. Hier gibt es einen Ort zu beachten: Der Wert des Attributnamens des aktuellen Elements muss den Ausdruck {{}} nicht hinzufügen, da das übergeordnete Bereich hier ein reales Umfangsdatenmodell übergibt, keine einfache Zeichenfolge, sodass wir einfache Zeichenfolgen, Arrays und sogar komplexe Objekte an den Bereich der Anweisung übergeben können. Lassen Sie uns nun sehen, was passiert, wenn Sie auf diese Schaltfläche klicken.
Hier können wir sehen, dass sich die Farbe der Schaltfläche in Pink geändert hat, was bedeutet, dass das Klick das Farbattribut des Umfangs des Befehls ändert, wodurch sich die Farbe der Schaltfläche ändert. Aber hier ist nicht nur der Button, der sich geändert hat. Achten Sie auf den Wert im Eingangsformular sind auch rosa geworden, was bedeutet, dass sich auch das Farbattribut des übergeordneten Bereichs geändert hat. Lassen Sie uns außerdem eine Farbe in die Eingabe eingeben, um festzustellen, welche Änderungen eingetreten sind.
Es ist ersichtlich, dass sich auch die Farbe der Schaltfläche ändert, wenn wir eine andere Farbe in der Form eingeben, was bedeutet, dass das Farbattribut des Umfangs des Befehls geändert wurde. Zusammenfassend können wir feststellen, dass die Verwendung von '=' eine Zwei-Wege-Bindung ist.
Drei: Verwenden und rufen Sie die Methode im übergeordneten Umfang an und rufen Sie sie auf
var myapp = angular.module ('myapp', []) .controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'rot'; Ersetzen: TRUE, TEMPLEE: '<Button ng-klick = " Elements.css ('Hintergrund-Color', 'Blue');<hallo color = "color" SayShello = "Sayhello ()"> </Hallo> <Eingabe type = "text" ng-model = "color"/>
Hier haben wir auch zwei Dinge zu beachten: 1. Wir müssen nicht nur die NG-Klick-Direktive in der Vorlage verwenden, um die Methode in den übergeordneten Bereich zu binden, sondern auch eine Eigenschaft zum aktuellen Element hinzufügen, und diese Eigenschaft zeigt in die Methode des zu bezeichnenden übergeordneten Bereichs. 2. Die drei des Anweisungsbereichsattributs SayShello, das aktuelle Element -Attribut Sayshello und der Ereignismethodenname, der die Vorlage bindet, muss konsistent sein. Dann können wir auf die Schaltfläche klicken und ein Dialogfeld auftaucht.
6. Transclude [boolean] Attribut wird verwendet, damit wir angeben können, ob die Anweisung Inhalte enthalten kann
.Directive ('Hello', function () {retrict {eingeschränkt: 'aecm', ersetzen: true, transclude: true, scope: {}, Vorlage: '<div ng-transclude> </div>',}}) <Hallo> Hallo <span> {{color}} </span> </hello>Wenn sein Wert wahr ist, ist dies die Wertausgabe auf der Seite. Wenn falsch, ist die Seite leer. Hier gibt es einen Ort, an den man achten kann, das <span> {{color}} </span> ist. Die Farbe hier ist die Farbe im Elternbereich. Es ist nicht das Farbattribut des Umfangs in der Richtlinie.
7. Kompilieren Sie den Parameter [Funktion]. Diese Methode hat zwei Parameterelemente, Attrs. Das erste Parameterelement bezieht sich auf das Element, in dem sich die Anweisung befindet, und die zweiten Attrs bezieht sich auf die standardisierte Liste der im Element zugewiesenen Parameter. Hier haben wir auch einen Ort, an dem wir beachten können: Die Kompilierungsfunktion kann nicht auf den Bereich zugreifen und muss eine Linkfunktion zurückgeben. Wenn die Kompilierungsfunktion jedoch nicht festgelegt ist, können Sie die Linkfunktion normal konfigurieren (mit Compile können Sie die Link -Funktion nicht verwenden, die Linkfunktion wird per Kompilierung zurückgegeben).
.directive('hello', function () { return{ restrict:'AECM', replace:true, translate:true, template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>', scope:{ color:'=', sayhello:'&' }, compile: function (element,attrs) { return function (Scope, Elements, Attrs) {Elements.bind ('Click', function () {Elements.css ('Hintergrund-Color', 'Blue'); Scope. $ anwenden (function () {scope.color = 'pink';})})};Klicken wir nun auf diese Schaltfläche
Wir haben festgestellt, dass das, was nach dem Klicken auf die Schaltfläche hier passiert ist, über das gleiche ist wie das, das das Link -Attribut zuvor verwendet hat, und es gibt eigentlich keinen großen Unterschied.
In den meisten Fällen müssen wir nur die Verbindungsfunktion verwenden. Dies liegt daran, dass die meisten Anweisungen nur das Registrieren von Ereignishörern, Überwachungsmodell und das Aktualisieren von DOM in Betracht ziehen müssen, die in Linkfunktionen erfolgen können. Für Anweisungen wie NG-Repeat müssen DOM-Elemente jedoch mehrmals geklont und wiederholt werden, und die Kompilierungsfunktion erfolgt, bevor die Linkfunktion ausgeführt wird. Warum brauchen wir also zwei separate Funktionen, um den Erzeugungsprozess abzuschließen, und warum können wir nicht nur eines verwenden? Um diese Frage gut zu beantworten, müssen wir verstehen, wie Richtlinien in Angular zusammengestellt werden!
8. Wie werden Anweisungen zusammengestellt
Wenn unser Angular -Anwendungsstiefel gestartet wird, verwendet Angular den $ Compile -Service, um das DOM -Element zu durchqueren. Nachdem alle Anweisungen erkannt wurden, wird die Kompilierungsmethode der Anweisung aufgerufen, eine Verbindungsfunktion wird zurückgegeben, und dann wird die Link -Funktion zu der Liste der später ausgeführten Linkfunktionen hinzugefügt. Dieser Prozess wird als Zusammenstellungsphase bezeichnet. Anweisungen wie NG-Repeat müssen viele Male wiederholt und geklont werden. Die Kompilierungsfunktion wird nur einmal während der Kompilierungsphase ausgeführt und diese Vorlagen werden kopiert, die Verbindungsfunktion wird jedoch für jede kopierte Instanz ausgeführt. Wir können damit getrennt damit umgehen, um unsere Leistung zu verbessern (dieser Satz ist etwas unrealistisch, ich habe ihn von anderen Orten kopiert.
9. Controller [String oder Funktion] und benötigen [String oder String []] Parameter. Wenn wir zulassen möchten, dass andere Anweisungen mit Ihren Anweisungen interagieren, müssen wir die Controller -Funktion verwenden. Wenn eine andere Richtlinie interagieren will, muss sie seinen Hinweis auf die Controller -Instanz Ihrer Richtlinie erklären.
.Directive ('Hello', function () {return {scope: {}, fordern: '^er', kompile: function (Element, attrs) {return function (scope, elements, attrs, cntins) {cntins.fn ()}; ($ scope, $ compile, $ http) {this.fn = function () {alert ('Hallo');<E> <Hallo color = "color" SayShello = "
Wenn die Seite geladen wird, wird ein Dialogfeld angezeigt.
Nun, das obige ist das, was ich über die Anweisungen gelernt habe, die ich in dieser Zeit gelernt habe. Lassen Sie uns diesen schreiben.
Die obige umfassende Analyse der Anweisungen in AngularJs (Must Read) ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.