Como faço para escapar das chaves para exibição na página ao usar o AngularJS?

97

Quero que o usuário veja as chaves duplas, mas o Angular as vincula automaticamente. Este é o caso oposto desta questão em que eles não querem ver as chaves usadas para vinculação quando a página está carregando.

Quero que o usuário veja isto:

My name is {{person.name}}.

Mas Angular substitui {{person.name}}pelo valor. Achei que isso pudesse funcionar, mas angular ainda o substitui pelo valor:

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

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

angularjs

— Jason Goemaat
fonte

Se você estiver disposto a ir com outro delimitador (como [[ ]]): stackoverflow.com/questions/12923521/…

— Thilo

2

Obrigado, eu vi isso, mas a questão toda é realmente para uma página de amostra mostrando como funcionam os colchetes e eu quero ver a fonte para ser capaz de se parecer exatamente com o que está na página que mostra a amostra, se isso fizer sentido.

— Jason Goemaat

possível duplicata de Impedir que a notação de chave dupla seja exibida momentaneamente antes do angular.js compilar / interpolar o documento

— Maxime Lorant

1

@MaximeLorant Esse é um problema completamente diferente de evitar a exibição momentânea de colchetes quando a página está carregando. Esta questão é sobre como fazê-los aparecer mesmo depois que a página for carregada e para evitar que o angular os vincule.

— Jason Goemaat

147

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

Documentação @ ngNonBindable

— Mike Pugh
fonte

6

Você também pode usar <div> ou qualquer outra tag, basta adicionar ng-non-bindable

— Mike Pugh

5

e se {{value}}estiver dentro de um valor de tag de entrada?

— Timo Huovinen de

@TimoHuovinen, para gerar chaves em um atributo HTML, veja minha resposta .

— joeytwiddle de

@TimoHuovinen Você pode usar um ng-non-bindableelemento de contêiner, você pode ver minha resposta: stackoverflow.com/a/42511222/1407491

— Nabi KAZ

Isso não funciona atualmente; usando Angular 8. A resposta de @joeytwiddle, entretanto.

— JE Carter II

28

Editar: adicionar \ barra entre colchetes dentro das aspas funciona

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

isso também .. passa por interpretações angulares

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

isto também ..

{{ person.name }<x>} 

{{ person.name }<!>}

— bh_earth0
fonte

Me dá umLexer Error

— Jason Goemaat

1

{{'{{' asd '}}'}} e quanto a dele

— bh_earth0

4

Esta é uma resposta tardia a uma pergunta com uma resposta aceita. Se você optar por fornecer uma nova resposta, deverá tomar precauções extras para garantir que a solução funcione e fornecer razões convincentes pelas quais esta resposta é preferida à resposta amplamente aceita. Além disso, isso não responde diretamente à pergunta de qualquer maneira.

— Claies de

Como para este {{...}}.

— ROMANIA_engineer

11

Em nosso caso, queríamos apresentar chaves em um espaço reservado, portanto, elas precisavam aparecer dentro de um atributo HTML . Usamos isto:

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

Como você pode ver, estamos construindo uma string a partir de três strings menores, para manter as chaves separadas.

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

Isso evita o uso, ng-non-bindablepara que possamos continuar a usar ng-atributos em outras partes do elemento.

— joeytwiddle
fonte

Funciona (tão recentemente quanto angular 8).

— JE Carter II

3

Use ng-non-bindableno contêiner, isso é eficaz em todos os elementos dentro do contêiner.

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

— Nabi KAZ
fonte

3

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

— EscapeNetscape
fonte

1

Atualizado para Angular 9

Use ngNonBindablepara escapar da ligação de interpolação.

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

— Matt
fonte

1

Eu queria colchetes simples no texto e as soluções acima não funcionaram para mim. Então queria o Angular recomendado.

Versão Angular: 5

Texto obrigatório: Meu nome é {person.name}.

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

Eu espero que isso ajude alguém.

— bhavya_karia
fonte