Использование директив в AngularJS: Теория и практика

| Пятница, 30 августа, 2013

Метки AngularJS, Javascript


Directive Definition Object (Объект определения директивы)

Объект определения директивы предоставляет инструкции для компилятора. Объект имеет следующие атрибуты:

  • name – Имя текущей области видимости. Является необязательным и устанавливается при регистрации.
  • priority – Если для одного DOM объекта определено несколько директив, то иногда необходимо указать порядок их применения. Указание Priority используется для сортировки директив прежде чем, их вызовут функции компиляции. Priority инициализируется числом. Директивы с большим номером компилируются в первую очередь. Порядок директив с одинаковыми значениями Priority не определен. Значение по умолчанию ноль.
  • terminal – Значение установлено true, то набор директив для объекта будет выполняться в последнюю очередь.
  • scope – значения могут быть следующими:
    • True – Новая область видимости будет создана для директивы.Если несколько директив запрашивают создание новой области видимости, то создана будет только одна на всех. Правила новой области видимости не применяются к корневому шаблону.
    • {}(object hash) – создается новая “изолированная” область видимости. ‘Изолированная’ область видимости отличается от обычно, тем, что не наследуется прототипно от корневой области видимости. Это очень полезно при создании повторно используемых компонентов, которые не смогут случайно прочитать или изменить данные корневой области видимости.
      "Изолированная" область видимости держит хеш объекта, который в свою очередь, определяет набор локальных свойств области видимости, наследуемых от родительской области видимости. Эти локальные свойства полезны для назначения имен значений для шаблонов. Локальные определения - это хеш локальной области видимости, свойства и их значения:
      • @ или @attr – связывают свойство локальной области видимости с атрибутом DOM. Результатом всегда является строка, если DOM атрибуты – строки. Если значение attr не определено, то имя атрибута будет тем же что и имя свойства. Например:
        <widget my-attr=”hello {{name}}”>,
        а область видимости scope: { localName:'@myAttr' } 
        
        свойство области видимости будет проецироваться на hello {{name}}. Как только изменится атрибут тои измениться свойство localName. Name читается и родительской области видимости.
      • = или =attr устанавливает двустороннее соединение между свойством локальной области и свойством родительской областью видимости c именем, которое определено в attr. Если ничего не определено в attr, тогда имя атрибута будет таким же как и локальное имя. Например:
        <widget my-attr="parentModel">,
        а область видимости scope: { localModel:'=myAttr' } 
        
        тогда свойство области видимости виджета LocalModel ,будет проецироваться на значение parentModel области видимости родителя. Все изменения в parentModel будут отражены в localModel и все изменения в localModel будут отражены в parentModel. Если родительское свойство не существует возникнет исключение NON_ASSIGNABLE_MODEL_EXPRESSION. Можно обойти эту проблему указав =? или =?attr, это будет значить опциональное значение.
      • & или &attr – предоставляет способ выполнения выражения в контексте области видимости родителя. Если не указано значение attr, то предполагается, оно то же самое, что и локальное имя. Например:
        <widget my-attr="count = count + value"> 
        и область видимости scope: { localFn:'&myAttr' }, 
        
        свойство изолированной области видимости localFn будет указывать на функцию-обертку для выражения count = count + value. Часто бывает необходимо передать данные из изолированной области видимости в через выражение в область видимости родителя, это может быть реализовано через передачу локальных переменных, имен и значений в обертку выражения fn. Например, выражение – increment(amount), затем мы сможем определить значение вызовом localFn как localFn({amount : 22}).
  • controller – Является функцией-конструктором. Контроллер создается перед фазой линкования и он виден всем директивам (смотри ниже атрибут require). Этот позволяет взаимодействовать директивам друг с другом. И расширять поведения друг друга. Контроллер поддерживает инжекции (используя квадратные скобки), следующими объектами:
    • &scope – Текущая области видимости, ассоциированная с элементом.
    • &element – Текущий элемент.
    • &attrs – Текущие атрибуты объекта элемента.
    • &transclude – трансклюзивная функция связывания, для заранее связанной корректной трансклюзивной области видимости: function(cloneLinkingFn).
  • require – Другая директива и инжектируется в контроллер,как четвертый аргумент в связывающую функцию. Require инициализируется строкой или массивом строк для передачи в директивы. Если передается массив строк, то инжектируемый аргумент будет отсортирован в определенном порядке. Если директива не будет найдена или у директивы не будет контроллера, возникнет ошибка.Имена могут быть со следующими приставками:
    • (без приставки) – Контроллер базируется на текущем элементе.
    • ? - Попытка найти нужный контроллер, или возвращаем null.
    • ^ - Ищем нужный контроллер в родительских элементах.
    • ?^ - Попытка поиска требуемого контроллера в родительских элементах, или возвращаем null.
  • controllerAs – Псевдоним контроллера в области видимости директивы. На псевдонимы контроллера ссылаются шаблоны директив. Директивам нужно определить область видимости для настроек использования.
  • restrict – Подстрока EACM, которая ограничивает специфичные стили директивы. Если ничего не указано, используются директивы по умолчанию
    • E – Имя элемента: <my-directive></my-directive>
    • A – Атрибут: <div my-directive="exp"></div>
    • C – Класс: <div class="my-directive: exp;"></div>
    • M – Комментарий: <!-- directive: my-directive exp --></li>
  • template – Заменяет текущий элемент куском HTML. Процесс замены переносит также атрибуты и классы от старого элемента новому.
    В качестве шаблона можно определить простую строку, но и можно указать функцию, принимающую два аргумента tElement и tAttrs, описанные чуть ниже. Функция будет возвращать строку HTML.
  • templateUrl - Тоже самое что и template, только вместо строки URL. Так как шаблон загружается асинхронно то компиляция/линкование приостанавливаются, пока шаблон не загрузится.
    В качестве шаблона можно определить простую строку, но и можно указать функцию, принимающую два аргумента tElement и tAttrs, описанные чуть ниже. Функция будет возвращать строку URL.
  • replace - если установлено в true, то шаблон заменит текущий элемент раньше, чем при обычной замене.
  • transclude - компилирует содержимое элемента, и результат делает доступным директиве. Обычно используется с встроенной директивой ngTransclude. Преимущество трансклюзии заключается, в том, что связующая функция получает трансклюзивную функцию, которая уже предварительно связана с нужной областью видимости. В обычной ситуации директива создает изолированную область видимости, но трансклюзия не дочерний элемент, а соседний. Это дает возможность директиве иметь приватное состояние, а трансклюзия связана с родительской областью видимости. Итак значения могут быть такими:
    • true - трансклюзия содержимое директивы
    • 'element' -
    • элемент с transclude является полноценным элементом включая все директивы с более низким приоритетом.
  • compile - Компилирующая функция, которая будет подробно описана в продолжении этой статьи.
  • link -Связывающая функция, которая будет подробно описана в продолжении этой статьи. Это свойство используется только тогда, когда свойство compile не определено