Директива лучше всего (как правило), когда она короткая (с точки зрения кода), (потенциально) может использоваться повторно и имеет ограниченную область действия с точки зрения функциональности. Создание директивы, которая включает в себя пользовательский интерфейс и зависит от службы (которая, как я предполагаю, обрабатывает подключение к бэкэнду), не только дает ему 2 функциональные роли, а именно:
- Управление пользовательским интерфейсом для отображения / ввода данных для виджета.
- Отправка в бэкэнд (через сервис).
но также делает его менее пригодным для повторного использования, так как вы не сможете использовать его снова с другим сервисом или с другим пользовательским интерфейсом (по крайней мере, нелегко).
Принимая эти решения, я часто сравниваю со встроенными элементами HTML: например <input>, <textarea>или <form>: они полностью независимы от какого-либо конкретного бэкэнда. HTML5 дал <input>элементу несколько дополнительных типов, например date, которые по-прежнему не зависят от бэкэнда, и куда именно идут данные или как они используются. Они являются чисто интерфейсными элементами. Ваши пользовательские виджеты, созданные с использованием директив, я думаю, должны следовать той же схеме, если это возможно.
Однако это не конец истории. Выйдя за пределы аналогии со встроенными элементами HTML, вы можете создавать директивы многократного использования, которые как вызывают службы, так и используют чисто директиву пользовательского интерфейса, точно так же, как она может использовать a <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: вы можете делать все это с помощью директив, если у каждого из них есть четкая роль «пользовательского интерфейса» или роль «данных».
Следует отметить один недостаток: он дает больше «движущихся частей» приложению, что добавляет сложности. Тем не менее, если каждая часть имеет четкую роль и хорошо (проверено устройство + E2E), я бы сказал, что это того стоит, и общая выгода в долгосрочной перспективе.