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

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

Ниже приведен пример интерполяции:

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

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

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

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

Обратите внимание, что у директивы interpolate есть приоритет 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)

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

<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 могут сломать ваш код.