Как избежать фигурных скобок для отображения на странице при использовании AngularJS?

Я хочу, чтобы пользователь видел двойные фигурные скобки, но Angular связывает их автоматически. Это противоположный случай этого вопроса, где они не хотят видеть фигурные скобки, используемые для привязки при загрузке страницы.

Я хочу, чтобы пользователь увидел это:

My name is {{person.name}}.

Но Angular заменяет {{person.name}} на значение. Я думал, что это может сработать, но Angular все еще заменяет его значением:

&#123;&#123;person.name}}

Plunker: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

Ответ 1

<code ng-non-bindable>{{person.name}}</code>

Документация @http://docs.angularjs.org/api/ng.directive:ngNonBindable

Ответ 2

Изменить: добавление\слэша между скобками внутри кавычек

{{  "{{ person.name }\}"   }}

это тоже.. проходами angular интерпретация

{{ person.name }<!---->}

это тоже..

{{ person.name }<x>} 

{{ person.name }<!>}

Ответ 3

В нашем случае мы хотели представить фигурные скобки в заполнителе, поэтому они должны появиться внутри атрибута HTML. Мы использовали это:

 <input placeholder="{{ 'Hello {' + '{person.name}' + '}!' }}" ...>

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

'Hello {' + '{person.name}' + '}!'

Это позволяет избежать использования ng-non-bindable, поэтому мы можем продолжать использовать атрибуты ng- в другом месте элемента.

Ответ 4

<span>{{</span>{{variable.name}}<span>}}</span>

Ответ 5

Используйте ng-non-bindable в контейнере, это действует на весь контейнер внутри контейнера.

<div ng-non-bindable>
  <span>{{person.name}}</span>
  <img src="#" alt="{{person.name}}">
  <input placeholder="{{person.name}}">
</div>