- PVSM.RU - https://www.pvsm.ru -
Для увеличения гибкости использования директив, я добавил «препроцессор» для директив. Он вызывается в момент «подключения» директивы в DOM. Вы можете расширить его либо заменить на свой, что дает такие возможности как:
Далее пара примеров:
Добавляем атрибут «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>'
}
})
Пример директивы:
alight.directives.al.example = {
bold: true
}
«Ленивое» подключение директив
Задача: все директивы с префиксом «dyn» автоматический подгружать с сервера в момент их использования из соответсвующего файла.
Пример директивы dyn-directive и её подключения:
<span dyn-directive="name"></span>
Файл директивы будет загружен по имени директивы: dyn.directive.js
alight.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()
Пример на Plunker [2]
Подмена препроцессора находится в файле system.js, см. пример.
Обычно такие возможности не нужны в проектах, но иногда бывают полезны.
Предыдущие статьи: Angular Light. Управляем декларативным биндингом данных в HTML [3], Наследование директив в Angular Light [4]
Автор: lega
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/54792
Ссылки в тексте:
[1] Пример на Plunker: http://plnkr.co/edit/XxDimA?p=preview
[2] Пример на Plunker: http://plnkr.co/edit/If6pVN?p=preview
[3] Angular Light. Управляем декларативным биндингом данных в HTML: http://habrahabr.ru/post/209108/
[4] Наследование директив в Angular Light: http://habrahabr.ru/post/208282/
[5] Источник: http://habrahabr.ru/post/212301/
Нажмите здесь для печати.