Улучшить эту документациюИнтерполяция и привязка данных

Разметка интерполяции с встроенными выражениями используется Angular для обеспечения привязки данных к текстовым узлам и значениям атрибутов.

Пример интерполяции показан ниже:

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

Как работают привязки текста и атрибутов

Во время процесса компиляции компилятор использует службу $interpolate для проверки, содержат ли текстовые узлы и атрибуты элементов разметку интерполяции с встроенными выражениями.

В случае наличия компилятор добавляет в узел директиву interpolate и регистрирует наблюдения за вычисленной функцией интерполяции, которая будет обновлять соответствующие текстовые узлы или значения атрибутов в рамках обычного цикла переваривания.

Обратите внимание, что у interpolateDirective есть приоритет 100 и он устанавливает наблюдение в функции preLink.

Привязка к булевым атрибутам

Атрибуты, такие как disabled , называются boolean атрибутами, потому что их наличие означает true , а их отсутствие означает false . Мы не можем использовать обычные привязки атрибутов с ними, потому что спецификация HTML не требует от браузеров сохранять значения булевых атрибутов. Это означает, что если мы поместим выражение Angular интерполяции в такой атрибут, то информация о привязке будет утеряна, потому что браузер игнорирует значение атрибута.

В следующем примере информация об интерполяции будет проигнорирована, и браузер просто интерпретирует атрибут как присутствующий, что означает, что кнопка всегда будет отключена.

Disabled: <input type="checkbox" ng-model="isDisabled" />
<button disabled="{{isDisabled}}">Disabled</button>

По этой причине Angular предоставляет специальные директивы с префиксом ng для следующих булевых атрибутов: disabled, required, selected, checked, readOnly и open.

Эти директивы принимают выражение внутри атрибута и устанавливают соответствующий булев атрибут в значение true, когда выражение вычисляется как истинное.

Disabled: <input type="checkbox" ng-model="isDisabled" />
<button ng-disabled="isDisabled">Disabled</button>

ngAttr для привязки к произвольным атрибутам

Веб-браузеры иногда придирчивы к тому, какие значения они считают допустимыми для атрибутов.

Например, рассмотрим этот шаблон:

<svg>
  <circle cx="{{cx}}"></circle>
</svg>

Мы ожидали, что Angular сможет привязаться к этому, но при проверке консоли мы видим что-то вроде Error: Invalid value for attribute cx="{{cx}}". Из-за ограничений API DOM SVG вы не можете просто написать cx="{{cx}}".

С помощью ng-attr-cx вы можете обойти эту проблему.

Если атрибут с привязкой имеет префикс ngAttr (денормализован как ng-attr-), то во время привязки он будет применён к соответствующему атрибуту без префикса. Это позволяет привязываться к атрибутам, которые в противном случае будут предвзято обработаны браузерами (например, circle[cx] атрибуты элемента SVG).

При использовании ngAttr, используется флаг allOrNothing $interpolate, поэтому, если какое-либо выражение в интерполированной строке имеет значение undefined, атрибут удаляется и не добавляется к элементу.

Например, мы могли бы исправить пример выше, написав вместо этого:

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>

Если нужно изменить атрибут с верблюжьей нотацией (элементы SVG имеют допустимые атрибуты с верблюжьей нотацией), например, viewBox для элемента svg, можно использовать нижнее подчеркивание для обозначения того, что атрибут для привязки имеет естественную верблюжью нотацию.

Например, для привязки к viewBox, можно написать:

<svg ng-attr-view_box="{{viewBox}}">
</svg>

Другие атрибуты также могут не работать как ожидается, когда они содержат разметку интерполяции, и могут быть использованы с ngAttr вместо этого. Ниже приведен список известных проблемных атрибутов:

• size в элементах <select> (см. проблему 1619)
• placeholder в <textarea> в Internet Explorer 10/11 (см. проблему 5025)
• type в <button> в Internet Explorer 11 (см. проблему 14117)
• value в <progress> в Internet Explorer = 11 (см. проблему 7218)

Известные проблемы

Динамическое изменение интерполированного значения

Следует избегать динамического изменения содержимого интерполированной строки (например, значения атрибута или текстового узла). Ваши изменения, вероятно, будут перезаписаны, когда исходная строка будет вычислена. Это ограничение относится как к прямому изменению содержимого через JavaScript, так и к косвенному использованию директивы.

Например, вы не должны использовать интерполяцию в значении атрибута style (например, style="color: {{ 'orange' }}; font-weight: {{ 'bold' }};") и одновременно использовать директиву, которая изменяет содержимое этого атрибута, такую как ngStyle.

Встраивание разметки интерполяции внутри выражений

<div ng-show="form{{$index}}.$invalid"></div>

Вместо этого следует делегировать вычисление сложных выражений области видимости, как в этом примере:

<div ng-show="getForm($index).$invalid"></div>

function getForm(index) {
  return $scope['form' + index];
}

Вы также можете получить доступ к scope с this в своих шаблонах:

<div ng-show="this['form' + $index].$invalid"></div>

Почему смешивание интерполяции и выражений – плохая практика:

• Это увеличивает сложность разметки
• Нет гарантии, что это сработает для каждой директивы, потому что сама интерполяция – это директива. Если другая директива обращается к данным атрибута до выполнения интерполяции, она получит исходную разметку интерполяции, а не данные.
• Это влияет на производительность, так как интерполяция добавляет ещё одно наблюдение в область видимости.
• Поскольку это не рекомендуемая практика, мы не тестируем её и изменения в ядре Angular могут сломать ваш код.