Ich habe ein paar Tage lang meinen Kopf gegen die Wand geschlagen, und ich denke, dass ein bisschen mehr Erklärung angebracht ist.
Grundsätzlich wird in den Dokumenten erwähnt, dass die Trennung weitgehend eine Leistungssteigerung darstellt. Ich möchte wiederholen, dass die Kompilierungsphase hauptsächlich verwendet wird, wenn Sie das DOM ändern müssen, bevor die Unterelemente selbst kompiliert werden.
Für unsere Zwecke werde ich die Terminologie hervorheben, die ansonsten verwirrend ist:
Der Compiler SERVICE ($ compile) ist der Winkelmechanismus, der das DOM verarbeitet und die verschiedenen Codebits in Direktiven ausführt.
Die Kompilierungsfunktion ist ein Codebit innerhalb einer Direktive, die zu einem bestimmten Zeitpunkt vom Compiler SERVICE ($ compile) ausgeführt wird.
Einige Hinweise zur Kompilierung FUNCTION:
Sie können das ROOT-Element (das Element, auf das sich Ihre Direktive auswirkt) nicht ändern, da es bereits von der äußeren Ebene von DOM kompiliert wird (der Kompilierungs-SERVICE hat bereits nach Direktiven für dieses Element gesucht).
Wenn Sie (verschachtelten) Elementen weitere Anweisungen hinzufügen möchten, haben Sie entweder:
Müssen sie während der Kompilierungsphase hinzufügen.
Sie müssen den Kompilierungsdienst in die Verknüpfungsphase einfügen und die Elemente manuell kompilieren. ABER, hüte dich davor, etwas zweimal zu kompilieren!
Es ist auch hilfreich zu sehen, wie die Verschachtelung und die expliziten Aufrufe von $ compile funktionieren. Daher habe ich unter http://jsbin.com/imUPAMoV/1/edit einen Spielplatz zum Anzeigen erstellt . Grundsätzlich werden nur die Schritte in console.log protokolliert.
Ich werde die Ergebnisse dessen, was Sie in diesem Papierkorb sehen würden, hier angeben. Für ein DOM mit benutzerdefinierten Direktiven sind tp und sp wie folgt verschachtelt:
<tp>
<sp>
</sp>
</tp>
Angular Compile SERVICE ruft auf:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link
Der jsbin-Code hat auch die Funktion tp post-link FUNCTION, die den Kompilierungs-SERVICE explizit für eine dritte Direktive (up) aufruft, die am Ende alle drei Schritte ausführt.
Jetzt möchte ich einige Szenarien durchgehen, um zu zeigen, wie man die Kompilierung und den Link verwenden kann, um verschiedene Dinge zu tun:
SZENARIO 1: Richtlinie als MAKRO
Sie möchten eine Anweisung (z. B. ng-show) dynamisch zu etwas in Ihrer Vorlage hinzufügen, das Sie aus einem Attribut ableiten können.
Angenommen, Sie haben eine templateUrl, die auf Folgendes verweist:
<div><span><input type="text"></span><div>
und Sie möchten eine benutzerdefinierte Direktive:
<my-field model="state" name="address"></my-field>
das macht das DOM zu folgendem:
<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>
Grundsätzlich möchten Sie die Boilerplate reduzieren, indem Sie eine konsistente Modellstruktur haben, die Ihre Direktive interpretieren kann. Mit anderen Worten: Sie möchten ein Makro.
Dies ist eine großartige Verwendung für die Kompilierungsphase, da Sie alle DOM-Manipulationen auf Dingen basieren können, die Sie nur aus den Attributen kennen. Verwenden Sie einfach jQuery, um die Attribute hinzuzufügen:
compile: function(tele, tattr) {
var span = jQuery(tele).find('span').first();
span.attr('ng-show', tattr.model + ".visible." + tattr.name);
...
return {
pre: function() { },
post: function() {}
};
}
Die Reihenfolge der Operationen ist (Sie können dies über den zuvor erwähnten jsbin sehen):
- Der Kompilierungs-SERVICE findet mein Feld
- Es ruft die Kompilierungsfunktion FUNCTION für die Direktive auf, die das DOM aktualisiert.
- Der Kompilierungsdienst betritt dann das resultierende DOM und KOMPILIERT (rekursiv)
- Der Kompilierungsdienst ruft dann den Pre-Link von oben nach unten auf
- Der Kompilierungs-SERVICE ruft dann BOTTOM UP nach der Verknüpfung auf, sodass die Verknüpfungsfunktion von my-field aufgerufen wird, nachdem interne Knoten verknüpft wurden.
Im obigen Beispiel ist keine Verknüpfung erforderlich, da die gesamte Arbeit der Direktive in compile FUNCTION ausgeführt wurde.
Der Code in einer Direktive kann jederzeit verlangen, dass der Compiler SERVICE auf zusätzlichen Elementen ausgeführt wird.
Dies bedeutet, dass wir in einer Link-Funktion genau dasselbe tun können, wenn Sie den Kompilierungsdienst einfügen:
directive('d', function($compile) {
return {
// REMEMBER, link is called AFTER nested elements have been compiled and linked!
link: function(scope, iele, iattr) {
var span = jQuery(iele).find('span').first();
span.attr('ng-show', iattr.model + ".visible." + iattr.name);
// CAREFUL! If span had directives on it before
// you will cause them to be processed again:
$compile(span)(scope);
}
});
Wenn Sie sicher sind, dass die Elemente, die Sie an $ compile SERVICE übergeben, ursprünglich direktivenfrei waren (z. B. aus einer von Ihnen definierten Vorlage stammen oder Sie sie nur mit angle.element () erstellt haben), ist das Endergebnis ziemlich genau das gleiche wie zuvor (obwohl Sie möglicherweise einige Arbeiten wiederholen). Wenn das Element jedoch andere Anweisungen enthält, haben Sie diese nur erneut verarbeitet, was zu allen möglichen fehlerhaften Verhaltensweisen führen kann (z. B. doppelte Registrierung von Ereignissen und Uhren).
Daher ist die Kompilierungsphase eine viel bessere Wahl für Arbeiten im Makrostil.
SZENARIO 2: DOM-Konfiguration über Bereichsdaten
Dieser folgt aus dem obigen Beispiel. Angenommen, Sie benötigen Zugriff auf den Bereich, während Sie das DOM bearbeiten. In diesem Fall ist der Kompilierungsabschnitt für Sie nutzlos, da dies geschieht, bevor ein Bereich verfügbar ist.
Angenommen, Sie möchten eine Eingabe mit Validierungen aufpeppen, aber Ihre Validierungen aus einer serverseitigen ORM-Klasse (DRY) exportieren und sie automatisch anwenden lassen und die richtige clientseitige Benutzeroberfläche für diese Validierungen generieren.
Ihr Modell könnte pushen:
scope.metadata = {
validations: {
address: [ {
pattern: '^[0-9]',
message: "Address must begin with a number"
},
{ maxlength: 100,
message: "Address too long"
} ]
}
};
scope.state = {
address: '123 Fern Dr'
};
und Sie möchten vielleicht eine Richtlinie:
<form name="theForm">
<my-field model="state" metadata="metadata" name="address">
</form>
So fügen Sie die richtigen Anweisungen und Divs automatisch ein, um die verschiedenen Validierungsfehler anzuzeigen:
<form name="theForm">
<div>
<input ng-model="state.address" type="text">
<div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...
In diesem Fall benötigen Sie auf jeden Fall Zugriff auf den Bereich (da dort Ihre Validierungen gespeichert sind) und müssen die Ergänzungen manuell kompilieren, wobei Sie erneut darauf achten müssen, die Dinge nicht doppelt zu kompilieren. (Als Randnotiz müssten Sie einen Namen für das enthaltende Formular-Tag festlegen (ich nehme hier die Form an) und könnten in Verbindung mit iElement.parent () darauf zugreifen. controller ('form'). $ name) .
In diesem Fall macht es keinen Sinn, eine Kompilierungsfunktion zu schreiben. Link ist wirklich das, was Sie wollen. Die Schritte wären:
- Definieren Sie eine Vorlage, die keine Winkelanweisungen enthält.
- Definieren Sie eine Verknüpfungsfunktion, die die verschiedenen Attribute hinzufügt
- ENTFERNEN Sie alle Winkelanweisungen, die Sie möglicherweise für Ihr Element der obersten Ebene (die my-field-Anweisung) zulassen. Sie wurden bereits verarbeitet, und dies ist eine Möglichkeit, um zu verhindern, dass sie doppelt verarbeitet werden.
- Rufen Sie zum Abschluss den Kompilierungs-SERVICE für Ihr Element der obersten Ebene auf
Wie so:
angular.module('app', []).
directive('my-field', function($compile) {
return {
link: function(scope, iele, iattr) {
// jquery additions via attr()
// remove ng attr from top-level iele (to avoid duplicate processing)
$compile(iele)(scope); // will pick up additions
}
};
});
Sie können die verschachtelten Elemente natürlich einzeln kompilieren, um zu vermeiden, dass Sie sich beim erneuten Kompilieren des Elements der obersten Ebene Gedanken über die doppelte Verarbeitung von ng-Anweisungen machen müssen.
Ein letzter Hinweis zu diesem Szenario: Ich habe impliziert, dass Sie die Definition der Validierungen von einem Server aus verschieben würden, und in meinem Beispiel habe ich sie als Daten angezeigt, die bereits im Bereich enthalten sind. Ich überlasse es dem Leser als Übung, herauszufinden, wie man damit umgehen kann, dass diese Daten aus einer REST-API abgerufen werden müssen (Hinweis: verzögerte Kompilierung).
SZENARIO 3: Zweiwege-Datenbindung über Link
Natürlich besteht die häufigste Verwendung von Links darin, die bidirektionale Datenbindung einfach über watch / apply anzuschließen. Die meisten Richtlinien fallen in diese Kategorie, sodass sie an anderer Stelle angemessen behandelt werden.
