Пользователь
0,0
рейтинг
11 февраля 2014 в 23:05

Разработка → Angular Light: «Ленивое» подключение директив и препроцессор

Для увеличения гибкости использования директив, я добавил «препроцессор» для директив. Он вызывается в момент «подключения» директивы в DOM. Вы можете расширить его либо заменить на свой, что дает такие возможности как:
  • Добавление своих атрибутов в директивы (наподобие 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>'
  }
})

Пример директивы:
alight.directives.al.example = {
  bold: true
}
Пример на Plunker

«Ленивое» подключение директив
Задача: все директивы с префиксом «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
Подмена препроцессора находится в файле system.js, см. пример.

Обычно такие возможности не нужны в проектах, но иногда бывают полезны.
Предыдущие статьи: Angular Light. Управляем декларативным биндингом данных в HTML, Наследование директив в Angular Light
Oleg Nechaev @lega
карма
43,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (0)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.