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
    Метки:
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 0

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