Улучшить эту документациюВыражения AngularJS

Выражения AngularJS — это фрагменты кода, похожие на JavaScript, которые в основном размещаются в связях интерполяции, таких как <span title="{{ attrBinding }}">{{ textBinding }}</span>, но также используются непосредственно в атрибутах директивы, таких как ng-click="functionExpression()".

Например, следующие выражения допустимы в AngularJS:

• 1+2
• a+b
• user.name
• items[index]

Выражения AngularJS по сравнению с выражениями JavaScript

Выражения AngularJS похожи на выражения JavaScript с следующими отличиями:

• Контекст: Выражения JavaScript вычисляются относительно глобального window. В AngularJS выражения вычисляются относительно объекта scope.

• Прощение ошибок: В JavaScript попытка оценить неопределённое свойство вызывает ReferenceError или TypeError. В AngularJS оценка выражения игнорирует undefined и null.

• Фильтры: Вы можете использовать фильтры в выражениях для форматирования данных перед их отображением.

• Отсутствие операторов управления потоком: В выражении AngularJS нельзя использовать следующие элементы: условные операторы, циклы или исключения.

• Отсутствие объявлений функций: Вы не можете объявлять функции в выражении AngularJS, даже внутри ng-init директивы.

• Отсутствие создания регулярных выражений с помощью литеральной нотации: Вы не можете создавать регулярные выражения в выражении AngularJS. Исключением из этого правила является ng-pattern, которое принимает допустимое регулярное выражение.

• Отсутствие создания объектов с помощью оператора new: Вы не можете использовать оператор new в выражении AngularJS.

• Отсутствие побитовых, запятых и операторов void: Вы не можете использовать побитовые, , или void операторы в выражении AngularJS.

Если вам нужно выполнить более сложный JavaScript-код, следует сделать его методом контроллера и вызвать этот метод из представления. Если вы хотите eval() выражение AngularJS самостоятельно, используйте метод $eval().

Вы можете попробовать оценить разные выражения здесь:

Контекст

AngularJS не использует eval() JavaScript для оценки выражений. Вместо этого служба $parse AngularJS обрабатывает эти выражения.

Выражения AngularJS не имеют прямого доступа к глобальным переменным, таким как window, document или location. Это ограничение сделано намеренно. Оно предотвращает случайный доступ к глобальному состоянию — распространённому источнику скрытых ошибок.

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

Можно получить доступ к объекту контекста с помощью идентификатора this и к локальным объектам с помощью идентификатора $locals.

Прощение ошибок

Оценка выражения игнорирует неопределённые и null значения. В JavaScript оценка a.b.c вызывает исключение, если a не является объектом. Хотя это логично для языка общего назначения, оценка выражений в основном используется для привязки данных, которая часто выглядит так:

{{a.b.c}}

Более разумно ничего не отображать, чем вызывать исключение, если a неопределённо (возможно, мы ждём ответа от сервера, и он скоро станет определённым). Если оценка выражения не была бы игнорирующей ошибки, нам пришлось бы писать привязки, которые усложнили бы код, например: {{((a||{}).b||{}).c}}

Аналогично, вызов функции a.b.c() на undefined или null просто возвращает undefined.

Отсутствие операторов управления потоком

Помимо условного оператора (a ? b : c), вы не можете написать оператор управления потоком в выражении. Причина этого лежит в основе философии AngularJS, согласно которой логика приложения должна быть в контроллерах, а не в представлениях. Если вам нужен настоящий условный оператор, цикл или бросок исключения из выражения представления, используйте для этого JavaScript-метод вместо этого.

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

Вы не можете объявлять функции или создавать регулярные выражения из выражений AngularJS. Это делается для предотвращения сложной логики преобразования модели внутри шаблонов. Такая логика лучше размещается в контроллере или в специальном фильтре, где она может быть надлежащим образом протестирована.

$event

Директивы, такие как ngClick и ngFocus, предоставляют объект $event в рамках области действия этого выражения. Объект представляет собой экземпляр объекта объекта события jQuery, если jQuery присутствует, или похожий объект jqLite.

Обратите внимание в примере выше, как мы можем передать $event в clickMe, но как он не отображается в {{$event}}. Это потому, что $event находится вне области действия этой привязки.

Однократная привязка

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

Причины использования однократной привязки

Основное назначение выражения однократной привязки — предоставить способ создания привязки, которая отменяется и освобождает ресурсы, как только привязка стабилизируется. Уменьшение количества наблюдаемых выражений ускоряет цикл обработки и позволяет отображать больше информации одновременно.

Алгоритм стабилизации значения

Выражения однократной привязки сохранят значение выражения в конце цикла обработки, если это значение не undefined. Если значение выражения задаётся в цикле обработки и затем, в том же цикле обработки, устанавливается в undefined, то выражение не выполняется и будет продолжать наблюдаться.

1. Для выражения, начинающегося с ::, при входе в цикл обработки и проверке выражения на изменения, сохранить значение как V
2. Если V не undefined, пометить результат выражения как стабильный и запланировать задачу для отмены наблюдения за этим выражением при выходе из цикла обработки
3. Обработать цикл обработки как обычно
4. По завершении цикла обработки и стабилизации всех значений обработать очередь задач отмены наблюдения. Для каждого отменяемого наблюдения проверить, сохраняет ли оно значение, отличное от undefined. Если это так, отменить наблюдение. В противном случае продолжить проверку выражения на изменения в будущих циклах обработки, следуя алгоритму, начиная с шага 1

Особый случай для литералов объектов

В отличие от простых значений, литералы объектов наблюдаются до тех пор, пока каждое ключевое слово не будет определено. См. http://www.bennadel.com/blog/2760-one-time-data-bindings-for-object-literal-expressions-in-angularjs-1-3.htm

Как извлечь выгоду из однократной привязки

Если выражение не изменится после задания, оно подходит для однократной привязки. Вот три примера случаев.

При интерполяции текста или атрибутов:

<div name="attr: {{::color}}">text: {{::name | uppercase}}</div>

При использовании директивы с двусторонней привязкой и параметрами, которые не изменятся:

someModule.directive('someDirective', function() {
  return {
    scope: {
      name: '=',
      color: '@'
    },
    template: '{{name}}: {{color}}'
  };
});

<div some-directive name="::myName" color="My color is {{::myColor}}"></div>

При использовании директивы, принимающей выражение:

<ul>
  <li ng-repeat="item in ::items | orderBy:'name'">{{item.name}};</li>
</ul>