Директивы AngularJS

Директивы AngularJS — это один из ключевых механизмов фреймворка AngularJS (первая версия, разработанная компанией Google), позволяющий расширять синтаксис HTML и создавать переиспользуемые компоненты пользовательского интерфейса. Директивы представляют собой маркеры на DOM-элементах (в виде атрибутов, имён элементов, классов или комментариев), которые сообщают компилятору AngularJS о необходимости привязать к элементу определённое поведение или трансформировать его. По сути, директива — это функция, выполняющаяся при инициализации элемента, к которому она применена.

История и предпосылки появления

AngularJS был создан Мишко Хевери в 2009 году и впервые представлен публике в 2010 году. Ключевой проблемой, которую решал фреймворк, была необходимость в декларативном описании динамических веб-интерфейсов. До его появления разработчики активно использовали jQuery для прямого манипулирования DOM, что приводило к сложному и трудно поддерживаемому коду. Директивы стали одним из главных инструментов для реализации принципа разделения ответственности: HTML-шаблон описывает структуру, а директива — поведение и логику.

В отличие от более поздних фреймворков (React, Vue, Angular 2+), где компоненты строятся на классах или функциях, в AngularJS директива была основным строительным блоком. В версии Angular 2+ (2016 год) концепция директив была существенно переработана: появились отдельные понятия «компонент» (компонентная директива) и «структурная директива», но в AngularJS все они объединялись под общим термином «директива».

Классификация директив

В AngularJS директивы делятся на несколько типов в зависимости от способа их применения в HTML-разметке и выполняемой функции.

По типу применения (match)

При регистрации директивы разработчик указывает параметр restrict, который определяет, как директива может быть вызвана в шаблоне:

• E (Element) — директива используется как имя HTML-элемента. Например: <my-directive></my-directive>.
• A (Attribute) — директива применяется как атрибут существующего HTML-элемента. Например: <div my-directive></div>. Это наиболее распространённый способ.
• C (Class) — директива активируется при наличии у элемента соответствующего CSS-класса. Например: <div class="my-directive"></div>.
• M (Comment) — директива определяется в HTML-комментарии. Используется крайне редко, в основном для совместимости с устаревшими браузерами.

На практике чаще всего используется комбинация restrict: 'EA', что позволяет применять директиву и как элемент, и как атрибут.

По функциональному назначению

• Компонентные директивы — создают полноценные переиспользуемые компоненты с собственным шаблоном, контроллером и изолированной областью видимости (scope). Это аналог компонентов в современных фреймворках.
• Декоративные директивы — модифицируют поведение или внешний вид существующего DOM-элемента, не создавая нового шаблона. Пример: директива ng-click, которая добавляет обработчик клика.
• Структурные директивы — изменяют структуру DOM, добавляя или удаляя элементы. Пример: ng-if, ng-repeat, ng-switch.

Устройство и жизненный цикл директивы

Регистрация директивы

Директива регистрируется в AngularJS-модуле с помощью метода directive(). Первым аргументом передаётся имя директивы (в camelCase, которое в HTML преобразуется в snake-case: myDirective → my-directive), вторым — фабричная функция, возвращающая объект определения директивы (Directive Definition Object — DDO).

``javascript angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'EA', scope: {}, // изолированная область видимости template: '<div>Привет, {{name}}!</div>', link: function(scope, element, attrs) { // логика инициализации } }; }); ``

Основные свойства DDO

• template / templateUrl — HTML-шаблон для замены содержимого элемента или для вставки.
• scope — определяет область видимости директивы. Может быть:
• false (по умолчанию) — директива использует родительскую область видимости.
• true — создаётся новая дочерняя область видимости, прототипно наследуемая от родительской.
• {} (объект) — создаётся изолированная область видимости, не наследующая от родителя. Это стандарт для компонентных директив.
• bindToController — привязка свойств из изолированной области видимости к контроллеру директивы (используется в связке с controllerAs).
• controller — функция-конструктор, которая управляет состоянием и поведением директивы.
• controllerAs — задаёт псевдоним для контроллера в шаблоне (например, vm).
• link — функция, выполняющаяся после компиляции шаблона. Используется для прямого манипулирования DOM, подписки на события, инициализации сторонних библиотек.
• compile — функция, выполняющаяся на этапе компиляции. Используется редко, в основном для трансформации шаблона до его связывания с областью видимости.
• transclude — механизм, позволяющий директиве встраивать содержимое вызывающего элемента (например, для создания обёрток).
• require — указывает, что директива требует контроллер другой директивы (например, для взаимодействия между родительской и дочерней директивами).

Жизненный цикл

1. Компиляция — AngularJS проходит по DOM-дереву, находит элементы с директивами, выполняет функцию compile (если она определена) и генерирует функцию link.
2. Связывание (linking) — выполняется функция link, которая связывает шаблон с областью видимости (scope). На этом этапе устанавливаются наблюдатели ($watch), регистрируются обработчики событий.
3. Обновление — при изменении данных в области видимости запускается цикл дайджеста ($digest), который обновляет привязки в шаблоне.
4. Уничтожение — при удалении элемента из DOM вызывается событие $destroy, которое очищает подписки и освобождает память.

Встроенные директивы AngularJS

AngularJS предоставляет набор встроенных директив, которые покрывают большинство базовых сценариев:

• ng-app — инициализирует AngularJS-приложение на элементе.
• ng-controller — привязывает контроллер к элементу.
• ng-model — двусторонняя привязка данных к элементу формы (input, select, textarea).
• ng-repeat — итерация по массиву или объекту, создание копий элемента для каждого элемента данных.
• ng-if — условное отображение элемента (создаёт/удаляет элемент из DOM).
• ng-show / ng-hide — условное отображение через CSS-класс (элемент остаётся в DOM).
• ng-click — обработчик клика.
• ng-class — динамическое управление CSS-классами.
• ng-style — динамическое управление inline-стилями.
• ng-src / ng-href — безопасная подстановка URL для изображений и ссылок.
• ng-switch — условное переключение между несколькими шаблонами.
• ng-options — генерация опций для <select>.
• ng-form — создание вложенных форм.
• ng-submit — обработчик отправки формы.
• ng-blur / ng-focus — обработчики событий потери и получения фокуса.
• ng-change — обработчик изменения значения модели.
• ng-disabled / ng-readonly — управление атрибутами disabled и readonly.
• ng-cloak — предотвращает отображение нескомпилированного шаблона.

Создание пользовательской директивы

Пример: директива для подсветки текста

``javascript angular.module('myApp', []) .directive('highlight', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.css('background-color', attrs.highlight || 'yellow'); } }; }); ``

HTML-использование: <p highlight="lightblue">Этот текст будет подсвечен голубым.</p>

Пример: компонентная директива с изолированным scope

``javascript angular.module('myApp', []) .directive('userCard', function() { return { restrict: 'E', scope: { user: '=', onDelete: '&' }, templateUrl: 'user-card.html', controller: function($scope) { $scope.delete = function() { $scope.onDelete({ userId: $scope.user.id }); }; }, controllerAs: 'vm', bindToController: true }; }); ``

Шаблон user-card.html: ``html <div class="card"> <h3>{{vm.user.name}}</h3> <p>{{vm.user.email}}</p> <button ng-click="vm.delete()">Удалить</button> </div> ``

Взаимодействие между директивами

Для обмена данными между директивами используется механизм require. Родительская директива может предоставить свой контроллер, а дочерняя — получить его через свойство require. Это позволяет строить иерархические компоненты (например, вкладки, аккордеоны).

``javascript angular.module('myApp', []) .directive('parentDirective', function() { return { restrict: 'E', controller: function($scope) { this.sayHello = function() { alert('Привет от родителя!'); }; } }; }) .directive('childDirective', function() { return { restrict: 'E', require: '^parentDirective', link: function(scope, element, attrs, parentCtrl) { element.on('click', function() { parentCtrl.sayHello(); }); } }; }); ``

Особенности и ограничения

• Производительность: большое количество директив, особенно с изолированным scope и сложными $watch, может замедлить работу приложения, так как каждый дайджест-цикл проверяет все привязки.
• Сложность отладки: из-за динамической природы AngularJS ошибки в директивах могут быть трудно диагностируемы.
• Совместимость с Angular 2+: концепция директив была переработана. В Angular 2+ (и выше) директивы делятся на три типа: компоненты (директивы с шаблоном), структурные директивы (например, ngIf, ngFor) и атрибутные директивы (например, ngClass). Прямая миграция директив AngularJS в Angular 2+ невозможна без переписывания.
• Устаревание: AngularJS (версия 1.x) находится в режиме долгосрочной поддержки (LTS) до июня 2022 года, после чего поддержка прекращена. Разработчикам рекомендуется переходить на современные фреймворки.

Критика

Директивы AngularJS критикуются за:

• Сложность синтаксиса: большое количество опций в DDO и тонкости их взаимодействия.
• Двусмысленность: одна и та же директива может быть использована как элемент, атрибут, класс или комментарий, что усложняет чтение кода.
• Путаница с областью видимости: неправильное использование scope: true и scope: {} приводило к неожиданным ошибкам, особенно у новичков.
• Отсутствие типизации: в отличие от Angular 2+ с TypeScript, AngularJS не предоставлял встроенной системы типов, что увеличивало количество ошибок в больших проектах.

Несмотря на критику, директивы AngularJS сыграли важную роль в эволюции веб-разработки, заложив основы компонентного подхода, который впоследствии был реализован во всех современных фреймворках.

Источники

• Официальная документация AngularJS (docs.angularjs.org)
• Книга «AngularJS: Up and Running» (Brad Green, Shyam Seshadri)
• Документация Google Developer (developers.google.com)
• Статья «Understanding AngularJS Directives» (Scotch.io)
• Репозиторий AngularJS на GitHub (github.com/angular/angular.js)