Link vs Kompilieren vs Controller

Wenn Sie eine Direktive erstellen, können Sie Code in den Compiler, die Link-function oder den Controller einfügen.

In den Dokumenten erklären sie, dass:

  • Compile- und Link-function werden in verschiedenen Phasen des angularzyklus verwendet
  • Controller werden von Direktiven gemeinsam genutzt

Für mich ist jedoch nicht klar, welche Art von Code wohin gehen soll.

ZB: Kann ich functionen im Kompilieren erstellen und sie dem Bereich in Link hinzufügen oder nur functionen an den Bereich im Controller anhängen?

Wie werden Controller zwischen Direktiven geteilt, wenn jede Direktive ihren eigenen Controller haben kann? Sind die Controller wirklich freigegeben oder sind es nur die Eigenschaften des Scopes?

Kompilieren:

Dies ist die Phase, in der Angular Ihre statement tatsächlich kompiliert. Diese Kompilierfunktion wird nur einmal für jeden Verweis auf die angegebene statement aufgerufen. Angenommen, Sie verwenden die ng-repeat-statement. ng-repeat muss das Element nachschlagen, an das es angehängt ist, das HTML-Fragment extrahieren, an das es angehängt ist, und eine Template-function erstellen.

Wenn Sie HandleBars, Unterstreichungsvorlagen oder Ähnliches verwendet haben, können Sie ihre Vorlagen kompilieren, um eine Vorlagenfunktion zu extrahieren. Zu dieser Vorlagenfunktion übergeben Sie Daten und der Rückgabewert dieser function ist der HTML-Code mit den Daten an den richtigen Stellen.

Die Kompilierungsphase ist der Schritt in Angular, der die Template-function zurückgibt. Diese Schablonenfunktion in eckig wird als Verknüpfungsfunktion bezeichnet.

Verknüpfungsphase:

In der Verknüpfungsphase verknüpfen Sie die Daten ($ scope) mit der Verknüpfungsfunktion und geben Ihnen den verknüpften HTML-Code zurück. Da die Direktive auch angibt, wohin dieser HTML-Code geht oder was er ändert, ist es schon gut zu gehen. Dies ist die function, bei der Sie Änderungen an dem verknüpften HTML vornehmen möchten, dh an dem HTML-Dokument, an das die Daten bereits angehängt sind. Wenn Sie in der Verknüpfungsfunktion Code schreiben, ist dies normalerweise die Post-Link-function (standardmäßig). Es ist eine Art Callback, der aufgerufen wird, nachdem die Verknüpfungsfunktion die Daten mit der Vorlage verknüpft hat.

Controller:

Der Controller ist ein Ort, an dem Sie eine bestimmte Logik eingeben. Diese Logik kann auch in die Verknüpfungsfunktion einbezogen werden, aber Sie müssten diese Logik dann auf den Bereich anwenden, um sie “gemeinsam nutzbar” zu machen. Das Problem dabei ist, dass Sie dann den Bereich mit Ihren Direktiven verderben, was nicht wirklich etwas ist, was erwartet wird. Was ist die Alternative, wenn zwei Richtlinien miteinander sprechen / zusammenarbeiten wollen? Natürlich könntest du diese ganze Logik in einen Dienst einfügen und dann machen diese beiden Direktiven von diesem Dienst abhängig, aber das bringt nur eine weitere Abhängigkeit mit sich. Die Alternative besteht darin, einen Controller für diesen Bereich bereitzustellen (normalerweise den Gültigkeitsbereich zu isolieren?), Und dann wird dieser Controller in eine andere Direktive eingefügt, wenn diese statement die andere “benötigt”. Sehen Sie die Registerkarten und Fenster auf der ersten Seite von angularjs.org als Beispiel.

Ich wollte auch hinzufügen, was das O’Reily AngularJS-Buch vom Google-Team zu sagen hat:

Controller – Erstellen Sie einen Controller, der eine API für die richtlinienübergreifende Kommunikation veröffentlicht. Ein gutes Beispiel ist die Richtlinie zur Mitteilung der Richtlinie

Link – Programmieren Sie die resultierenden DOM-Element-Instanzen programmgesteuert, fügen Sie Ereignis-Listener hinzu und richten Sie die Datenbindung ein.

Kompilieren – Programmgesteuert das DOM-Template für Features über Kopien einer Direktive hinweg ändern, wie es in ng-repeat verwendet wird. Ihre Kompilierfunktion kann auch Verknüpfungsfunktionen zurückgeben, um die resultierenden Elementinstanzen zu modifizieren.

Mit einer directive können Sie das HTML-Vokabular für den Aufbau von Web-Komponenten deklarativ erweitern. Das ng-app Attribut ist eine Direktive, also ng-controller und alle ng-controller ng- prefixed attributes . Direktiven können attributes , tags oder sogar class , comments .

Wie Direktiven entstehen ( compilation und instantiation )

Kompilieren: Wir verwenden die compile , manipulate das DOM vor der compile zu manipulate und eine link (die die Verknüpfung für uns übernimmt). Dies ist auch der Ort, um alle Methoden, die geteilt werden müssen, mit allen instances dieser Direktive zu verbinden.

link: Wir verwenden die link function, um alle Listener auf einem bestimmten DOM-Element zu registrieren (das aus der Vorlage geklont wurde) und richten unsere Bindungen auf die Seite ein.

Wenn sie in der compile() -function gesetzt wären, wären sie nur einmal gesetzt worden (was oft das ist, was Sie wollen). Wenn sie in der link() -function gesetzt würden, würden sie jedes Mal gesetzt, wenn das HTML-Element an Daten in der
Objekt.

 
Inner content
app.directive("simple", function(){ return { restrict: "EA", transclude:true, template:"
{{label}}
", compile: function(element, attributes){ return { pre: function(scope, element, attributes, controller, transcludeFn){ }, post: function(scope, element, attributes, controller, transcludeFn){ } } }, controller: function($scope){ } }; });

Compile gibt die pre und post Link-function zurück. In der Pre-Link-function haben wir die Instanzvorlage und auch den Bereich vom controller , aber die Vorlage ist nicht an den Bereich gebunden und hat noch immer keinen Inhalt.

Post Link-function ist, wo Post-Link die letzte function ist, die ausgeführt wird. Jetzt ist die transclusion abgeschlossen, the template is linked to a scope , und die view will update with data bound values after the next digest cycle . Die link Option ist nur eine Verknüpfung zum Einrichten einer post-link function.

controller: Der directive Controller kann an eine andere directive linking / compiling phase übergeben werden. Es kann in andere Richtungen als Mittel zur Verwendung in der zwischenrichtenden Kommunikation eingefügt werden.

Sie müssen den Namen der statement angeben, die benötigt wird – Sie sollte an dasselbe Element oder dessen Eltern gebunden sein. Der Name kann vorangestellt werden mit:

 ? – Will not raise any error if a mentioned directive does not exist. ^ – Will look for the directive on parent elements, if not available on the same element. 

Verwenden Sie die eckige Klammer ['directive1′, 'directive2′, 'directive3′] , um Controller mit mehreren statementen zu erfordern.

 var app = angular.module('app', []); app.controller('MainCtrl', function($scope, $element) { }); app.directive('parentDirective', function() { return { restrict: 'E', template: '', controller: function($scope, $element){ this.variable = "Hi Vinothbabu" } } }); app.directive('childDirective', function() { return { restrict: 'E', template: '

I am child

', replace: true, require: '^parentDirective', link: function($scope, $element, attr, parentDirectCtrl){ //you now have access to parentDirectCtrl.variable } } });

Ein guter Grund, eine Controller-Link-function zu verwenden (da beide Zugriff auf den Bereich, das Element und die Attribute haben), besteht darin, dass Sie einen verfügbaren Service oder eine Abhängigkeit in einen Controller (und in beliebiger Reihenfolge) übergeben können Mit der Link-function ist das nicht möglich. Beachten Sie die verschiedenen Signaturen:

 controller: function($scope, $exceptionHandler, $attr, $element, $parse, $myOtherService, someCrazyDependency) {... 

gegen

 link: function(scope, element, attrs) {... //no services allowed 

Dies ist ein gutes Beispiel für das Verständnis der Richtlinienphasen http://codepen.io/anon/pen/oXMdBQ?editors=101

 var app = angular.module('myapp', []) app.directive('slngStylePrelink', function() { return { scope: { drctvName: '@' }, controller: function($scope) { console.log('controller for ', $scope.drctvName); }, compile: function(element, attr) { console.log("compile for ", attr.name) return { post: function($scope, element, attr) { console.log('post link for ', attr.name) }, pre: function($scope, element, attr) { $scope.element = element; console.log('pre link for ', attr.name) // from angular.js 1.4.1 function ngStyleWatchAction(newStyles, oldStyles) { if (oldStyles && (newStyles !== oldStyles)) { forEach(oldStyles, function(val, style) { element.css(style, ''); }); } if (newStyles) element.css(newStyles); } $scope.$watch(attr.slngStylePrelink, ngStyleWatchAction, true); // Run immediately, because the watcher's first run is async ngStyleWatchAction($scope.$eval(attr.slngStylePrelink)); } }; } }; }); 

html

  
  • Kompilieren : Wird verwendet, wenn wir eine Direktivenvorlage ändern müssen, wie einen neuen Ausdruck hinzufügen, eine andere Direktive in diese Direktive einfügen
  • Controller : Wird verwendet, wenn $ Scope-Daten freigegeben / wiederverwendet werden sollen
  • Link : Es ist eine function, die verwendet wird, wenn wir Event-Handler anhängen oder DOM manipulieren müssen.