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

97

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

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

My name is {{person.name}}.

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

&#123;&#123;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>

— Наби КАЗ
источник

3

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

— Побег
источник

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
источник