ディレクティブは（経験則として）短く（コード単位で）、（潜在的に）再利用可能であり、機能の面で範囲が限られている場合に最適です。UIを含み、サービスに依存するディレクティブ（バックエンドへの接続を処理することを前提とする）を作成し、2つの機能的な役割を与えるだけではありません。
- ウィジェットのデータの表示/入力のUIを制御します。
- バックエンドへの送信（サービス経由）。
また、別のサービスや別のUIで（少なくとも簡単に）使用できないため、再利用しにくくします。
これらの決定をするとき、私はしばしば組み込みのHTML要素と比較します：例えば<input>、<textarea>または<form>：それらは特定のバックエンドから完全に独立しています。HTML5は、<input>要素にいくつかの追加の型を与えました。たとえばdate、まだバックエンドから独立しており、データがどこに行くか、どのように使用されるかです。これらは純粋にインターフェース要素です。ディレクティブを使用して構築されたカスタムウィジェットは、可能であれば同じパターンに従う必要があると思います。
ただし、これで話は終わりではありません。組み込みのHTML要素との類似性を超えて、サービスを呼び出す再利用可能なディレクティブを作成し、純粋にUIディレクティブを使用できます<textarea>。次のようにHTMLを使用するとします。
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
commentEntryディレクティブをコーディングするには、UIウィジェットとサービスをリンクするコントローラーのみを含む非常に小さなディレクティブを作成できます。何かのようなもの：
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
});
};
}
};
});
これを極端にするng-controllerと、HTMLに手動の属性を持つ必要はないかもしれません。それぞれが明確な「UI」ロールまたは明確な「データ」ロールを持っている限り、ディレクティブを使用してすべて行うことができます。
私が言及しなければならない欠点があります：それは、アプリケーションにより多くの「可動部分」を与え、それは少し複雑さを追加します。ただし、各部分に明確な役割があり、うまく機能している場合（ユニット+ E2Eテスト済み）、それは価値があり、長期的には全体的な利点があると主張します。