Для увеличения гибкости использования директив, я добавил «препроцессор» для директив. Он вызывается в момент «подключения» директивы в DOM. Вы можете расширить его либо заменить на свой, что дает такие возможности как:
Далее пара примеров:
Добавляем атрибут «bold» в директиву
alight.directivePreprocessor.ext — массив «обработчиков» которые вызываются из препроцессора, вставляем свой обработчик, в нем проверяем атрибут directive.bold и меняем содержимое элемента.
Пример директивы:
«Ленивое» подключение директив
Задача: все директивы с префиксом «dyn» автоматический подгружать с сервера в момент их использования из соответсвующего файла.
Пример директивы dyn-directive и её подключения:
Файл директивы будет загружен по имени директивы: dyn.directive.js
Подмена препроцессора находится в файле system.js, см. пример.
Обычно такие возможности не нужны в проектах, но иногда бывают полезны.
Предыдущие статьи: Angular Light. Управляем декларативным биндингом данных в HTML, Наследование директив в Angular Light
- Добавление своих атрибутов в директивы (наподобие template, templateUrl, scope ...)
- Преобразование директив и их подмена
- Смена местоположения директив, например в хранить часть директив в scope (ну а вдруг захочется)
Далее пара примеров:
Добавляем атрибут «bold» в директиву
alight.directivePreprocessor.ext — массив «обработчиков» которые вызываются из препроцессора, вставляем свой обработчик, в нем проверяем атрибут directive.bold и меняем содержимое элемента.
alight.directivePreprocessor.ext.splice(1, 0, { code: 'bold', // not necessary fn: function() { if(this.directive.bold) this.element.innerHTML = '<b>' + this.element.innerHTML + '</b>' } })
Пример директивы:
Пример на Plunkeralight.directives.al.example = { bold: true }
«Ленивое» подключение директив
Задача: все директивы с префиксом «dyn» автоматический подгружать с сервера в момент их использования из соответсвующего файла.
Пример директивы dyn-directive и её подключения:
<span dyn-directive="name"></span>
Файл директивы будет загружен по имени директивы: dyn.directive.js
Пример на Plunkeralight.directives.dyn.directive = { template: '<b>{{title}}</b>', scope: true, link: function(element, name, scope) { scope.$watch(name, function(value) { scope.title = '+' + value + '+' }, { init:true }) } } // Активируем наши "обработчики" когда директива полностью готова waitDirectives.directive.resolve()
Подмена препроцессора находится в файле system.js, см. пример.
Обычно такие возможности не нужны в проектах, но иногда бывают полезны.
Предыдущие статьи: Angular Light. Управляем декларативным биндингом данных в HTML, Наследование директив в Angular Light
