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

97

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

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

My name is {{person.name}}.

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

{{person.name}}

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

angularjs Джейсон Гоэмаат
источник
Если вы хотите вообще использовать другой разделитель (например, [[ ]]): stackoverflow.com/questions/12923521/…
Тило
2
Спасибо, я это видел, но все дело в образце страницы, показывающей, как работают фигурные скобки, и я хочу, чтобы при просмотре исходный код выглядел точно так же, как на странице, показывающей образец, если это имеет смысл.
Jason Goemaat 01
возможный дубликат параметра Запретить отображение двойной фигурной скобки на мгновение до того, как angular.js скомпилирует / интерполирует документ
Максим Лорант
1
@MaximeLorant Это совершенно другая проблема, связанная с предотвращением мгновенного отображения фигурных скобок при загрузке страницы, этот вопрос касается их отображения даже после загрузки страницы и предотвращения их привязки angular.
Джейсон Гоэмаат

Ответы:

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

Документация @ ngNonBindable

Майк Пью
источник
6
Вы также можете использовать <div> или любой другой тег, просто добавьте ng-non-bindable
Майк Пью
5
что, если {{value}}находится внутри значения входного тега?
Тимо Хуовинен
@TimoHuovinen, чтобы вывести фигурные скобки в атрибуте HTML, см. Мой ответ .
joeytwiddle
@TimoHuovinen Вы можете использовать ng-non-bindableв элементе контейнера, вы можете увидеть мой ответ: stackoverflow.com/a/42511222/1407491
Nabi KAZ
В настоящее время это не работает; с использованием Angular 8. Однако ответ @joeytwiddle.
JE Carter II
28

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

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

это тоже .. мимо проходов угловая интерпретация

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

это тоже .. 

{{ person.name }<x>} 

{{ person.name }<!>}
bh_earth0
источник
Дает мнеLexer Error
Джейсон Гоэмаат
1
{{'{{' asd '}}'}} как насчет его
bh_earth0
4
Это поздний ответ на вопрос с принятым ответом. Если вы решите дать новый ответ, вам следует принять дополнительные меры предосторожности, чтобы убедиться, что решение работает, и указать убедительные причины, по которым этот ответ предпочтительнее широко распространенного. Кроме того, это все равно не дает прямого ответа на вопрос.
Заявлено
Как для этого {{...}<!---->} .
ROMANIA_engineer 05
11

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

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

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

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

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

Joeytwiddle
источник
Работает (совсем недавно angular 8).
JE Carter II
3

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

<div ng-non-bindable>
  <span>{{person.name}}</span>
  <img src="#" alt="{{person.name}}">
  <input placeholder="{{person.name}}">
</div>
Наби КАЗ
источник
1

Обновлено для Angular 9

Используйте ngNonBindableдля выхода из привязки интерполяции.

<div ngNonBindable>
  My name is {{person.name}}
</div>
Мэтт
источник
1

Мне нужны были одинарные скобки в тексте, и приведенные выше решения у меня не работали. Так что хотел рекомендовать Angular.

Угловая версия: 5

Обязательный текст: Меня зовут {person.name}.

<span>My name is {{'{'}}person.name{{'}'}}.</span>

Надеюсь, это кому-то поможет.

bhavya_karia
источник