Директива найкраща (як правило), коли вона коротка (з кодом), (потенційно) повторно використана і має обмежений спектр функціональних можливостей. Створюючи директиву, яка включає інтерфейс користувача і залежить від послуги (що я припускаю, що обробляє з'єднання з бекендом), не тільки надає їй 2 функціональних ролі, а саме:
- Керування інтерфейсом користувача для відображення / введення даних віджета.
- Подання в бекенд (через сервіс).
але також робить його менш повторним у використанні, оскільки потім ви не можете використовувати його знову з іншою службою або з іншим інтерфейсом (принаймні, не просто).
Приймаючи ці рішення, я часто порівнюю з вбудованими елементами HTML: наприклад <input>, <textarea>або <form>: вони повністю незалежні від будь-якого конкретного бекенда. HTML5 надав <input>елементу кілька додаткових типів, наприклад date, який все ще не залежить від бекенда, і куди саме надходять дані або як вони використовуються. Вони є суто інтерфейсними елементами. Ваші користувацькі віджети, побудовані за допомогою директив, я думаю, повинні йти за тією ж схемою, якщо це можливо.
Однак це ще не кінець історії. Виходячи за межі аналогії із вбудованими елементами HTML, ви можете створювати повторно використовувані директиви, які обидва викликають служби, та використовувати суто директиву інтерфейсу користувача, як і це може використовувати <textarea>. Скажіть, що ви хочете використовувати якийсь HTML таким чином:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
Для кодування commentEntryдирективи ви можете зробити дуже невелику директиву, яка містить просто контролер, який пов'язує службу з інтерфейсом інтерфейсу користувача. Щось на зразок:
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" або чітку роль "data".
Я повинен зазначити мінус: він надає більше «рухомих частин» додатку, що додає трохи складності. Однак, якщо кожна частина має чітку роль, і вона добре (перевірена одиниця + E2E), я можу стверджувати, що це вартує і загальної вигоди в довгостроковій перспективі.