Eine Direktive ist (als Faustregel) am besten geeignet, wenn sie kurz (in Bezug auf den Code) ist, (möglicherweise) wiederverwendbar ist und einen begrenzten Funktionsumfang aufweist. Wenn Sie eine Direktive erstellen, die die Benutzeroberfläche enthält und von einem Dienst abhängt (von dem ich annehme, dass er die Verbindung zum Backend herstellt), werden nicht nur zwei Funktionsrollen zugewiesen, nämlich:
- Steuerung der Benutzeroberfläche für die Anzeige / Eingabe von Daten für das Widget.
- Übermittlung an das Backend (über den Service).
Sie können es aber auch weniger wiederverwenden, da Sie es dann nicht mehr mit einem anderen Dienst oder mit einer anderen Benutzeroberfläche verwenden können (zumindest nicht so einfach).
Wenn diese Entscheidungen zu treffen, vergleiche ich oft auf den integrierten HTML - Elementen: zum Beispiel <input>, <textarea>oder <form>: sie sind völlig unabhängig von einer bestimmten Backend. HTML5 hat dem <input>Element einige zusätzliche Typen gegeben, z. B. date, die immer noch unabhängig vom Backend sind und wo genau die Daten gespeichert sind oder wie sie verwendet werden. Sie sind reine Schnittstellenelemente. Ihre benutzerdefinierten Widgets, die mithilfe von Direktiven erstellt wurden, sollten nach Möglichkeit dem gleichen Muster folgen.
Dies ist jedoch nicht das Ende der Geschichte. Über die Analogie mit den integrierten HTML-Elementen hinaus können Sie wiederverwendbare Anweisungen erstellen, die sowohl Dienste aufrufen als auch eine reine Benutzeroberflächenanweisung verwenden, genau wie sie möglicherweise a verwendet <textarea>. Angenommen, Sie möchten HTML wie folgt verwenden:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
Um die commentEntryDirektive zu kodieren , können Sie eine sehr kleine Direktive erstellen, die nur den Controller enthält, der einen Service mit einem UI-Widget verbindet. So etwas wie:
app.directive('commentEntry', function (myService) {
return {
restrict: 'E',
template: '<comment-widget on-save="save(data)" on-cancel="cancel()"></comment-widget>',
require: '^document',
link: function (scope, iElement, iAttrs, documentController) {
// Allow the controller here to access the document controller
scope.documentController = documentController;
},
controller: function ($scope) {
$scope.save = function (data) {
// Assuming the document controller exposes a function "getUrl"
var url = $scope.documentController.getUrl();
myService.saveComments(url, data).then(function (result) {
// Do something
});
};
}
};
});
Im Extremfall müssen Sie möglicherweise nie ein manuelles ng-controllerAttribut im HTML haben: Sie können dies alles mithilfe von Direktiven tun, sofern jede direkt eine eindeutige "UI" -Rolle oder eine eindeutige "Daten" -Rolle hat.
Es gibt einen Nachteil, den ich erwähnen sollte: Es gibt der Anwendung mehr "bewegliche Teile", was ein bisschen Komplexität hinzufügt. Wenn jedoch jedes Teil eine klare Rolle spielt und gut ist (Einheit + E2E getestet), würde ich argumentieren, dass es sich lohnt und langfristig einen Gesamtnutzen darstellt.