Angular Direktiven - Wann und wie verwende ich kompilieren, controller, pre-link und post-link

Beim schreiben einer Angular Direktive, kann man verwenden, um die folgenden Funktionen zur Manipulation der DOM-Verhalten, die Inhalte und das Aussehen des Elements, auf dem der Richtlinie wird erklärt:

kompilieren
controller
pre-link
post-link

Scheint es einige Verwirrung, als für die Funktion sollte man nutzen. Diese Frage erfasst:

Richtlinie Grundlagen

Funktion der Natur, do 's und dont' s

Fragen:

InformationsquelleAutor der Frage Izhaki | 2014-07-07

angularjs angularjs-directive

167

In welcher Reihenfolge die Richtlinie Funktionen ausgeführt werden?

Für eine einzelne Richtlinie

Basiert auf den folgenden plunkbetrachten Sie das folgende HTML-markup:
```
<body>
    <div log='some-div'></div>
</body>
```
Mit der folgenden Richtlinie Erklärung:
```
myApp.directive('log', function() {

    return {
        controller: function( $scope, $element, $attrs, $transclude ) {
            console.log( $attrs.log + ' (controller)' );
        },
        compile: function compile( tElement, tAttributes ) {
            console.log( tAttributes.log + ' (compile)'  );
            return {
                pre: function preLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (pre-link)'  );
                },
                post: function postLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (post-link)'  );
                }
            };
         }
     };  

});
```
Der Konsole ausgegeben werden:
```
some-div (compile)
some-div (controller)
some-div (pre-link)
some-div (post-link)
```
Können wir sehen, dass compile wird zuerst ausgeführt, dann controllerdann pre-link und Letzte ist post-link.

Für verschachtelte Richtlinien

Hinweis: Das folgende gilt nicht für Weisungen, machen Ihre Kinder in der link-Funktion. Schon ein paar Winkel-Richtlinien, so wie ngIf, ngRepeat, oder jede Richtlinie mit transclude). Diese Richtlinien werden nativ haben Ihre link Funktion, die aufgerufen wird vor Ihrem Kind Richtlinien compile genannt wird.

Des original-HTML-markup ist Häufig von verschachtelten Elementen, jedes mit seiner eigenen Richtlinie. Wie im folgenden markup (siehe plunk):
```
<body>
    <div log='parent'>
        <div log='..first-child'></div>
        <div log='..second-child'></div>
    </div>
</body>
```
Die Ausgabe der Konsole sieht wie folgt aus:
```
//The compile phase
parent (compile)
..first-child (compile)
..second-child (compile)

//The link phase   
parent (controller)
parent (pre-link)
..first-child (controller)
..first-child (pre-link)
..first-child (post-link)
..second-child (controller)
..second-child (pre-link)
..second-child (post-link)
parent (post-link)
```
Unterscheiden wir zwei Phasen hier - die kompilieren phase und die link phase.

Die compile-phase

Wenn das DOM geladen ist Eckig startet die compile-phase, wo es durchquert das markup von oben nach unten und ruft compile auf alle Richtlinien. Grafisch könnten wir es Ausdrücken, etwa so:

Ist es vielleicht wichtig zu erwähnen, dass in dieser Phase, die Vorlagen, die der compile-Funktion wird die Quelle der Vorlagen (nicht-Instanz-Vorlage).

Der link-phase

DOM-Instanzen sind oft nur das Ergebnis von einem Quell-Vorlage gerendert wird, um den DOM, aber Sie können erstellt werden, indem ng-repeat oder eingeführt on-the-fly.

Immer, wenn eine neue Instanz eines Elements mit einer Richtlinie dargestellt, um den DOM, die link-phase beginnt.

In dieser phase, Winkel-Anrufe controllerpre-linkiteriert die Kinder, und rufen Sie post-link auf alle Richtlinien, etwa so:

InformationsquelleAutor der Antwort Izhaki
89

Was passiert zwischen diese Funktion Aufrufe?

Die Richtlinie verschiedene Funktionen ausgeführt werden, innerhalb von zwei andere Winkel-Funktionen genannt $compile (wo die Richtlinie compile ausgeführt wird) und eine interne Funktion namens nodeLinkFn (wo die Richtlinie controllerpreLink und postLink ausgeführt werden). Verschiedene Sachen in den eckigen Funktion vor und nach der Richtlinie Funktionen aufgerufen werden. Vielleicht am bemerkenswertesten ist das Kind Rekursion. Die folgende vereinfachte Abbildung zeigt die wesentlichen Schritte innerhalb der compile-und link-Phasen:

Demonstrieren die folgenden Schritte, verwenden wir Folgendes HTML-markup:
```
<div ng-repeat="i in [0,1,2]">
    <my-element>
        <div>Inner content</div>
    </my-element>
</div>
```
Mit der folgenden Richtlinie:
```
myApp.directive( 'myElement', function() {
    return {
        restrict:   'EA',
        transclude: true,
        template:   '<div>{{label}}<div ng-transclude></div></div>'
    }
});
```
Kompilieren

Den compile API sieht so aus:
```
compile: function compile( tElement, tAttributes ) { ... }
```
Oft die Parameter vorangestellt t zu bedeuten, dass die Elemente und Attribute zur Verfügung gestellt werden, denen der source-Vorlage, anstatt, dass die Instanz.

Vor dem Aufruf von compile transcluded Inhalt (falls vorhanden) wird entfernt, und die Vorlage wird angewendet, um das markup. So, das element zur Verfügung gestellt, um die compile Funktion wird ungefähr so Aussehen:
```
<my-element>
    <div>
        "{{label}}"
        <div ng-transclude></div>
    </div>
</my-element>
```
Beachten Sie, dass die transcluded Inhalt ist nicht neu eingefügt an dieser Stelle.

Folgenden der Aufruf an die Richtlinie .compile -, Winkel Durchlaufen alle child-Elemente, einschließlich derer, die gerade erst eingeführt wurden, die durch die Richtlinie (die template-Elemente, zum Beispiel).

Instanz Erstellung

In unserem Fall, drei Instanzen der Quelle obigen template erstellt werden (durch ng-repeat). So in der folgenden Sequenz wird dreimal ausgeführt, einmal pro Instanz.

Controller

Den controller API beinhaltet:
```
controller: function( $scope, $element, $attrs, $transclude ) { ... }
```
Eingabe der link-phase der link-Funktion zurückgegeben, die über $compile ist jetzt mit Umfang.

Ersten, die link-Funktion erstellen Sie einen untergeordneten Bereich (scope: true) oder einem isolierten Bereich ( scope: {...} ), wenn angefordert.

Den controller dann ausgeführt wird, sofern der Umfang der Instanz-element.

Pre-link

Den pre-link API sieht so aus:
```
function preLink( scope, element, attributes, controller ) { ... }
```
Praktisch nichts passiert zwischen dem Aufruf der Richtlinie .controller und die .preLink Funktion. Winkel-noch eine Empfehlung, wie jedes verwendet werden sollte.

Folgenden die .preLink rufen Sie die link-Funktion Durchlaufen jedes child-element - Aufruf der korrekte link-Funktion und Befestigung, um es den aktuellen Bereich (die dient dem übergeordneten Bereich für child-Elemente).

Post-link

Den post-link API ist ähnlich wie die pre-link Funktion:
```
function postLink( scope, element, attributes, controller ) { ... }
```
Vielleicht lohnt sich zu bemerken, dass, sobald eine Richtlinie .postLink Funktion aufgerufen wird, die link-Prozess von allen seinen untergeordneten Elementen abgeschlossen hat, einschließlich aller Kinder .postLink Funktionen.

Dies bedeutet, dass durch die Zeit, die .postLink heißt, die Kinder sind 'live' sind bereit. Dies beinhaltet:
- Datenbindung
- transklusion angewendet
- Zielfernrohr
Die Vorlage in dieser Phase wird also ungefähr so Aussehen:
```
<my-element>
    <div class="ng-binding">
        "{{label}}"
        <div ng-transclude>                
            <div class="ng-scope">Inner content</div>
        </div>
    </div>
</my-element>
```
InformationsquelleAutor der Antwort Izhaki

Wie erklären die verschiedenen Funktionen?

Kompilieren, Controller, Pre-link - & Post-link

Wenn man alle vier Funktion, die die Richtlinie befolgen Sie diese form:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            //Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            //Compile code goes here.
            return {
                pre: function preLink( scope, element, attributes, controller, transcludeFn ) {
                    //Pre-link code goes here
                },
                post: function postLink( scope, element, attributes, controller, transcludeFn ) {
                    //Post-link code goes here
                }
            };
        }
    };  
});

Beachten Sie, dass kompilieren gibt ein Objekt zurück, die sowohl die pre-link-und post-link-Funktionen; Winkel-lingo-sagen wir die compile-Funktion gibt einen template-Funktion.

Kompilieren, Controller & Post-link

Wenn pre-link ist nicht notwendig, die compile-Funktion kann einfach den post-link-Funktion statt einer definition Objekt, etwa so:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            //Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            //Compile code goes here.
            return function postLink( scope, element, attributes, controller, transcludeFn ) {
                    //Post-link code goes here                 
            };
        }
    };  
});

Manchmal möchte man hinzufügen compile Methode, nach der (post -) link - Methode definiert wurde. Für diese kann man verwenden:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            //Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            //Compile code goes here.

            return this.link;
        },
        link: function( scope, element, attributes, controller, transcludeFn ) {
            //Post-link code goes here
        }

    };  
});

Controller & Post-link

Wenn keine compile-Funktion benötigt wird, kann man überspringen, seine Erklärung insgesamt und den post-link-Funktion unter der link Eigenschaft der Richtlinie configuration-Objekt:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            //Controller code goes here.
        },
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                //Post-link code goes here                 
        },          
    };  
});

Kein controller

In jedem der obigen Beispiele kann man einfach entfernen Sie die controller Funktion, wenn nicht benötigt. So zum Beispiel, wenn nur post-link - Funktion benötigt wird, kann man verwenden:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                //Post-link code goes here                 
        },          
    };  
});

InformationsquelleAutor der Antwort Izhaki

31

Was ist der Unterschied zwischen einem Quelle Vorlage und ein Instanz-Vorlage?

Die Tatsache, dass Angular ermöglicht DOM-manipulation bedeutet, dass der Eingang markup in die Kompilierung ist manchmal Verschieden von der Ausgabe. Besonders, einige input-markup kann geklont werden, ein paar mal (wie mit ng-repeat), bevor gerendert wird, um das DOM.

Winkel-Terminologie ist ein bisschen widersprüchlich, aber es immer noch unterscheidet zwischen zwei Arten von Markierungen:
- Quelle Vorlage - markup geklont werden, wenn Sie gebraucht werden. Wenn geklont, dieses markup wird nicht gerendert werden, um das DOM.
- Instanz-Vorlage - das eigentliche markup gerendert werden, um den DOM. Wenn das Klonen beteiligt ist, wird jede Instanz ein Klon.
Das folgende markup veranschaulicht dies:
```
<div ng-repeat="i in [0,1,2]">
    <my-directive>{{i}}</my-directive>
</div>
```
Die html-Quelle definiert
```
    <my-directive>{{i}}</my-directive>
```
dient als Quelle Vorlage.

Aber so wie es gewickelt ist, innerhalb einer ng-repeat Richtlinie, diese Quelle Vorlage geklont wird (3 mal in unserem Fall). Diese Klone sind Instanz-Vorlage, jedes erscheinen in der DOM-und gebunden an die jeweiligen Anwendungsbereich.

InformationsquelleAutor der Antwort Izhaki
23

Compile-Funktion

Jede Richtlinie compile Funktion wird nur einmal aufgerufen, wenn die Winkel-bootstraps.

Offiziell, dies ist der Ort, zu erfüllen (Quelle) Vorlage Manipulationen, die nicht mit Umfang oder data binding.

Dadurch soll in Erster Linie für die Optimierung Zwecke; betrachten Sie das folgende markup:
```
<tr ng-repeat="raw in raws">
    <my-raw></my-raw>
</tr>
```
Den <my-raw> Richtlinie machen wird, einen bestimmten Satz von DOM-markup. So können wir entweder:
- Ermöglichen ng-repeat zum duplizieren der Quelle Vorlage (<my-raw>), und ändern Sie dann den Wert von jeder Instanz-Vorlage (außerhalb der compile - Funktion).
- Ändern Sie die Quelle Vorlage zur Einbeziehung der gewünschte markup-Symbole (in den compile - Funktion), und dann lassen Sie ng-repeat zu duplizieren.
Wenn es 1000 Elemente in der raws Sammlung, die letztere option können Sie schneller als die vorigen.

Tun:
- Markup manipulieren, damit es dient als Vorlage für die Instanzen (Klone).
Nicht
- Anfügen von Ereignishandlern.
- Untersuchen Sie die untergeordneten Elemente.
- Eingerichtet Beobachtungen auf Attribute.
- Eingerichtet Uhren auf den Umfang.
InformationsquelleAutor der Antwort Izhaki
20

Post-link-Funktion

Wenn die post-link Funktion aufgerufen wird, werden alle vorherigen Schritte haben stattgefunden - Bindung, transklusion, etc.

Dies ist normalerweise ein Ort, um weiter zu manipulieren die gerenderten DOM.

Tun:
- Manipulieren, DOM (gerendert, und damit instanziiert) Elemente.
- Anfügen von Ereignishandlern.
- Untersuchen Sie die untergeordneten Elemente.
- Eingerichtet Beobachtungen auf Attribute.
- Eingerichtet Uhren auf den Umfang.
InformationsquelleAutor der Antwort Izhaki
20

Controller-Funktion

Jede Richtlinie controller Funktion wird immer aufgerufen, wenn eine neue Verwandte element instanziiert wird.

Offiziell, die controller Funktion ist, wo man:
- Definiert der controller-Logik (Methoden), können geteilt werden zwischen den Controllern.
- Initiiert Geltungsbereich von Variablen.
Wieder, es ist wichtig, daran zu erinnern, dass, wenn die Richtlinie handelt es sich um einen isolierten Anwendungsbereich, Eigenschaften, die Vererbung von der übergeordneten Bereich sind noch nicht verfügbar.

Tun:
- Definieren, die controller-Logik
- Initiieren scope-Variablen
Nicht:
- Untersuchen Sie die untergeordneten Elemente (Sie können nicht gerendert werden noch an Umfang, etc.).
InformationsquelleAutor der Antwort Izhaki
16

Pre-link-Funktion

Jede Richtlinie pre-link Funktion wird immer aufgerufen, wenn eine neue Verwandte element instanziiert wird.

Wie bereits gesehen in der Reihenfolge der Kompilierung Abschnitt pre-link Funktionen aufgerufen werden Eltern-dann-Kind, in der Erwägung, dass post-link Funktionen aufgerufen werden child-then-parent.

Den pre-link Funktion wird nur selten verwendet, kann aber sinnvoll sein, in speziellen Szenarien; zum Beispiel, wenn ein Kind controller registriert sich selbst mit der parent-controller, aber die Registrierung hat in einem parent-then-child Mode (ngModelController tut Dinge auf diese Weise).

Nicht:
- Untersuchen Sie die untergeordneten Elemente (Sie können nicht gerendert werden noch an Umfang, etc.).
InformationsquelleAutor der Antwort Izhaki

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Richtlinie Grundlagen

Funktion der Natur, do 's und dont' s

Fragen:

In welcher Reihenfolge die Richtlinie Funktionen ausgeführt werden?

Für eine einzelne Richtlinie

Für verschachtelte Richtlinien

Die compile-phase

Der link-phase

Was passiert zwischen diese Funktion Aufrufe?

Kompilieren

Instanz Erstellung

Controller

Pre-link

Post-link

Wie erklären die verschiedenen Funktionen?

Kompilieren, Controller, Pre-link - & Post-link

Kompilieren, Controller & Post-link

Controller & Post-link

Kein controller

Was ist der Unterschied zwischen einem Quelle Vorlage und ein Instanz-Vorlage?

Compile-Funktion

Tun:

Nicht

Post-link-Funktion

Tun:

Controller-Funktion

Tun:

Nicht:

Pre-link-Funktion

Nicht: