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

Question

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

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

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

My name is {{person.name}}.

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

{{person.name}}

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

413 5

angularjs

5 ответов:

Comments

Ничего не найдено.

Mike Pugh · Accepted Answer · 2018-03-13 18:27:08

<code ng-non-bindable>{{person.name}}</code>
документация @ ngNonBindable

blackholeearth0_gmail · Accepted Answer · 2015-02-17 14:31:06

Edit: добавление \ Слэш между скобками внутри кавычек работает
{{  "{{ person.name }\}"   }}  
это слишком .. мимо проходит угловая интерпретация
{{ person.name }}
это слишком ..
{{ person.name }<x>} 

{{ person.name }<!>}

joeytwiddle · Accepted Answer · 2016-05-27 05:36:26

в нашем случае мы хотели представить фигурные скобки в заполнителе, поэтому они должны были появиться внутри HTML атрибут. Мы использовали это:
 <input placeholder="{{ 'Hello {' + '{person.name}' + '}!' }}" ...>
как вы можете видеть, мы строим строку из трех меньших строк, чтобы сохранить фигурные скобки разделены.
'Hello {' + '{person.name}' + '}!'
это позволяет избежать использования ng-non-bindable Так что мы можем продолжать использовать ng- атрибуты в другом месте на элемент.

EscapeNetscape · Accepted Answer · 2017-09-14 14:57:24

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

2

2017-09-14 14:57:24

Nabi K.A.Z. · Accepted Answer · 2017-02-28 16:21:44

использовать ng-non-bindable в контейнере, это эффективно на всех элементах внутри здесь контейнера.
<div ng-non-bindable>
  <span>{{person.name}}</span>
  <img src="#" alt="{{person.name}}">
  <input placeholder="{{person.name}}">
</div>