Wie deklariert man die verschiedenen Funktionen?
Kompilieren, Controller, Pre-Link & Post-Link
Wenn alle vier Funktionen verwendet werden sollen, folgt die Direktive diesem Format:
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller-Code kommt hier hin.
},
compile: function compile( tElement, tAttributes, transcludeFn ) {
// Kompilierungscode kommt hier hin.
return {
pre: function preLink( scope, element, attributes, controller, transcludeFn ) {
// Pre-Link-Code kommt hier hin
},
post: function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-Link-Code kommt hier hin
}
};
}
};
});
Beachten Sie, dass compile ein Objekt zurückgibt, das sowohl die pre-link- als auch die post-link-Funktionen enthält; in Angular-Sprache sagen wir, die compile-Funktion gibt eine Template-Funktion zurück.
Kompilieren, Controller & Post-Link
Wenn pre-link nicht erforderlich ist, kann die compile-Funktion einfach die post-link-Funktion zurückgeben, anstatt ein Definition-Objekt, wie folgt:
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller-Code kommt hier hin.
},
compile: function compile( tElement, tAttributes, transcludeFn ) {
// Kompilierungscode kommt hier hin.
return function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-Link-Code kommt hier hin
};
}
};
});
Manchmal möchte man eine compile-Methode hinzufügen, nachdem die (post) link-Methode definiert wurde. Hierfür kann man Folgendes verwenden:
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller-Code kommt hier hin.
},
compile: function compile( tElement, tAttributes, transcludeFn ) {
// Kompilierungscode kommt hier hin.
return this.link;
},
link: function( scope, element, attributes, controller, transcludeFn ) {
// Post-Link-Code kommt hier hin
}
};
});
Controller & Post-Link
Wenn keine compile-Funktion benötigt wird, kann man deren Deklaration vollständig überspringen und die post-link-Funktion unter der link-Eigenschaft des Direktivkonfigurationsobjekts bereitstellen:
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller-Code kommt hier hin.
},
link: function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-Link-Code kommt hier hin
},
};
});
Kein Controller
In einem der obigen Beispiele kann man einfach die controller-Funktion entfernen, wenn diese nicht benötigt wird. Wenn zum Beispiel nur die post-link-Funktion benötigt wird, kann man Folgendes verwenden:
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
link: function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-Link-Code kommt hier hin
},
};
});
