Як уникнути фігурних дужок для відображення на сторінці при використанні AngularJS?

97

Я хочу, щоб користувач бачив подвійні фігурні дужки, але Angular прив'язує їх автоматично. Це протилежний випадок цього запитання, коли вони хочуть не бачити фігурні дужки, що використовуються для прив’язки під час завантаження сторінки.

Я хочу, щоб користувач побачив це:

My name is {{person.name}}.

Але Angular замінює {{person.name}}значенням. Я думав, що це може спрацювати, але angular все ще замінює його значенням:

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

Планкер: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

angularjs

— Джейсон Гемаат
джерело

Якщо ви готові піти з іншим роздільником взагалі (наприклад [[ ]]): stackoverflow.com/questions/12923521/…

— Тіло

2

Дякую, я побачив це, але вся суть справді у зразковій сторінці, яка показує, як працюють фігурні дужки, і я хочу, щоб перегляд джерела мав змогу виглядати точно так, як на сторінці, що демонструє зразок, якщо це має сенс.

— Jason Goemaat

можливий дублікат запобігання короткочасному відображенню нотаток з подвійними фігурними дужками перед тим, як angular.js компілює / інтерполює документ

— Максим Лорант

1

@MaximeLorant Це зовсім інша проблема, пов’язана із запобіганням миттєвому відображенню фігурних дужок під час завантаження сторінки. Це питання стосується того, щоб їх відображати, навіть після завантаження сторінки, а також запобігати кутовим зв’язуванням.

— Джейсон Гоемаат,

147

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

Документація @ ngNonBinvable

— Майк Пью
джерело

6

Ви також можете використовувати <div> або будь-який інший тег, просто додайте ng-non-binvable

— Mike Pugh

5

а якщо {{value}}внутрішнє значення вхідного тегу?

— Тимо Хуовінен

@TimoHuovinen, для виведення фігурних дужок в атрибуті HTML див. Мою відповідь .

— joeytwiddle

@TimoHuovinen Ви можете використовувати ng-non-bindableелемент контейнера, ви можете побачити мою відповідь: stackoverflow.com/a/42511222/1407491

— Набі КАЗ

Наразі це не працює; використовуючи Angular 8. Відповідь @joeytwiddle все ж таки зробила.

— JE Carter II

28

Редагувати: додавання \ косої риски між дужками всередині лапок працює

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

це теж .. за допомогою кутового інтерпретування

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

це теж ..

{{ person.name }<x>} 

{{ person.name }<!>}

— bh_earth0
джерело

Дає меніLexer Error

— Jason Goemaat

1

{{'{{' asd '}}'}} що щодо його

— bh_earth0

4

Це пізня відповідь на питання з прийнятою відповіддю. Якщо ви вирішите надати нову відповідь, вам слід вжити додаткових запобіжних заходів, щоб переконатися, що рішення працює, і навести вагомі причини, чому ця відповідь є кращою перед широко прийнятою відповіддю. Крім того, це все одно прямо не відповідає на питання.

— Claies

Як для цього {{...}}.

— ROMANIA_engineer

11

У нашому випадку ми хотіли представити фігурні дужки в заповнювачі, тому вони повинні відображатися в атрибуті HTML . Ми використовували це:

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

Як бачите, ми будуємо рядок із трьох менших струн, щоб фігурні дужки не були відокремленими.

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

Це дозволяє уникнути використання, ng-non-bindableтому ми можемо продовжувати використовувати ng-атрибути в інших місцях елемента.

— joeytwiddle
джерело

Працює (зовсім недавно, як кутова 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>

— EscapeNetscape
джерело

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
джерело