Когда использовать двойные фигурные скобки {{}} в угловом

Взятые из Угловой документации:

Угловые выражения
Угловые выражения являются фрагментами кода, подобными JavaScript, которые в основном помещаются в интерполяционные привязки, такие как

<span title="{{ attrBinding }}">{{ textBinding }}</span>

но также используется непосредственно в атрибутах директивы, таких как ng-click="functionExpression()".

Например, это допустимые выражения в Angular:

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

Однако я немного смущен, когда использовать синтаксис двойных фигурных скобок {{}} а когда нет. Документация, по-видимому, предполагает, что вам не нужны они при использовании выражений в атрибутах директивы (см. Пример ng-click выше).

Хотя следующий код, который работает, предлагает анекдотические доказательства обратного:

<ul id="Menu">
        <li ng-repeat="appModule in applicationModules"
            id="{{appModule.Name}}"
            ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }" 
            ng-click="menuClicked(appModule.Name)">
            <a href="#Content/{{appModule.Name}}">{{appModule.Display}}</a>
        </li>
    </ul>

Обратите внимание, что в директиве ng-class используются двойные фигурные скобки, а внутри директивы ng-click они отсутствуют.

Откуда вы знаете, когда их использовать, а когда нет?

Ответы

Ответ 1

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

Из вашего примера:

ng-repeat="appModule in applicationModules"

Нет необходимости в фигурных скобках, так как это выражение оценивается угловым внутри директивы ng-repeat.

id="{{appModule.Name}}"

Здесь нам нужны фигурные скобки, так как мы хотим, чтобы id был равен значению выражения.

ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }"

Я уверен, что это может быть написано как:

ng-class="{ 'selected' :  selectedAppModule == appModule.Name }"

И вы получаете то же поведение.

ng-click="menuClicked(appModule.Name)"

В этом примере нам нужно, чтобы ng-click привязывался к методу с именем menuClicked.

Обычно мы используем {{}}, когда хотим оценить выражение и при работе с атрибутами нам не всегда нужно использовать {{}}, поскольку они во многих случаях оцениваются за кулисами.

Простой совет. Правило большого пальца, когда требуется {{}}, - это думать об этом как обертке для .ToString() -method. Имеет смысл преобразование выражения в строку, то есть с помощью {{}}. (Любой встречный пример очень приветствуется)

Ответ 2

Проверьте документацию. Избегайте использования интерполяции {{ }} когда в документации указано, что директива принимает выражение. В случае ng-src в документе явно говорится о применении {{ }}. Если атрибут не является директивой AngularJS, используйте интерполяцию.

ошибочный

ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }"

Вышеприведенный пример является примером смешивания интерполяции и угловых депрессий.

Вместо этого используйте:

ng-class="{ 'selected' :  selectedAppModule == appModule.Name }"

Из Документов:

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

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

- Руководство разработчика AngularJS - смешивание интерполяции и выражений

Обновить

Не используйте интерполяцию с помощью: