¿Cómo puedo escapar de las llaves para mostrarlas en la página cuando uso AngularJS?

97

Quiero que el usuario vea llaves dobles, pero Angular las une automáticamente. Este es el caso opuesto de esta pregunta en la que no quieren ver las llaves utilizadas para encuadernar cuando se carga la página.

Quiero que el usuario vea esto:

My name is {{person.name}}.

Pero Angular reemplaza {{person.name}}con el valor. Pensé que esto podría funcionar, pero angular aún lo reemplaza con el valor:

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

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

angularjs

— Jason Goemaat
fuente

Si está dispuesto a utilizar otro delimitador por completo (como [[ ]]): stackoverflow.com/questions/12923521/…

— Thilo

2

Gracias, vi eso, pero el punto es realmente una página de muestra que muestra cómo funcionan los frenos y quiero ver la fuente para poder verse exactamente como lo que está en la página que muestra la muestra si eso tiene sentido.

— Jason Goemaat

posible duplicado de Evitar que la notación de doble llave se muestre momentáneamente antes de que angular.js compile / interpole el documento

— Maxime Lorant

1

@MaximeLorant Ese es un problema completamente diferente que tiene que ver con la prevención de la visualización momentánea de llaves cuando la página se está cargando, esta pregunta se trata de hacer que se muestren incluso después de que la página se haya cargado y para evitar que angular las enlace.

— Jason Goemaat

147

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

Documentación @ ngNonBindable

— Mike Pugh
fuente

6

También puede usar <div> o cualquier etiqueta, simplemente agregue ng-non-bindable

— Mike Pugh

5

¿Qué {{value}}pasa si está dentro de un valor de etiqueta de entrada?

— Timo Huovinen

@TimoHuovinen, para generar llaves en un atributo HTML, vea mi respuesta .

— joeytwiddle

@TimoHuovinen Puede usar ng-non-bindableen el elemento contenedor, puede ver mi respuesta: stackoverflow.com/a/42511222/1407491

— Nabi KAZ

Esto no funciona actualmente; usando Angular 8. Sin embargo, la respuesta de @joeytwiddle sí.

— JE Carter II

28

Editar: agregar \ barra entre corchetes dentro de las comillas funciona

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

esto también .. por pasa interpretación angular

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

esto también ..

{{ person.name }<x>} 

{{ person.name }<!>}

— bh_earth0
fuente

Me da unLexer Error

— Jason Goemaat

1

{{'{{' asd '}}'}} ¿qué pasa con su

— bh_earth0

4

Esta es una respuesta tardía a una pregunta con una respuesta aceptada. Si opta por proporcionar una nueva respuesta, debe tomar precauciones adicionales para asegurarse de que la solución funcione y debe proporcionar razones convincentes por las que se prefiere esta respuesta a la respuesta ampliamente aceptada. Además, esto no responde directamente a la pregunta de todos modos.

— Claies

Como para este {{...}}.

— RUMANIA_engineer

11

En nuestro caso, queríamos presentar las llaves en un marcador de posición, por lo que debían aparecer dentro de un atributo HTML . Usamos esto:

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

Como puede ver, estamos construyendo una cuerda a partir de tres cuerdas más pequeñas, para mantener las llaves separadas.

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

Esto evita el uso ng-non-bindablepara que podamos seguir usando ng-atributos en otras partes del elemento.

— joeytwiddle
fuente

Funciona (tan recientemente como angular 8).

— JE Carter II

3

Usar ng-non-bindableen contenedor, esto es efectivo en todos los elementos dentro de este contenedor.

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

— Nabi KAZ
fuente

3

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

— EscapeNetscape
fuente

1

Actualizado para Angular 9

Úselo ngNonBindablepara escapar del enlace de interpolación.

<div ngNonBindable>
  My name is {{person.name}}
</div>

— Mate
fuente

1

Quería corchetes simples en el texto y las soluciones anteriores no funcionaron para mí. Así que quería que se recomendara el Angular.

Versión angular: 5

Texto obligatorio: Mi nombre es {person.name}.

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

Espero que esto ayude a alguien.

— bhavya_karia
fuente