Come faccio a sfuggire alle parentesi graffe per la visualizzazione sulla pagina quando utilizzo AngularJS?

97

Voglio che l'utente veda le doppie parentesi graffe, ma Angular le lega automaticamente. Questo è il caso opposto di questa domanda in cui vogliono non vedere le parentesi graffe utilizzate per l'associazione durante il caricamento della pagina.

Voglio che l'utente veda questo:

My name is {{person.name}}.

Ma Angular sostituisce {{person.name}}con il valore. Ho pensato che potrebbe funzionare, ma angular lo sostituisce ancora con il valore:

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

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

angularjs

— Jason Goemaat
fonte

Se sei disposto a usare un altro delimitatore del tutto (come [[ ]]): stackoverflow.com/questions/12923521/…

— Thilo

2

Grazie, l'ho visto, ma il punto è davvero per una pagina di esempio che mostra come funzionano le parentesi graffe e voglio che la visualizzazione della fonte sia in grado di assomigliare esattamente a ciò che è sulla pagina che mostra l'esempio se ha senso.

— Jason Goemaat

possibile duplicato di Impedisci la visualizzazione momentanea della notazione doppia parentesi graffa prima che angular.js compili / interpoli il documento

— Maxime Lorant

1

@MaximeLorant Questo è un problema completamente diverso per impedire la visualizzazione momentanea di parentesi graffe durante il caricamento della pagina, questa domanda riguarda il farli visualizzare anche dopo che la pagina è stata caricata e per evitare che angular li leghi.

— Jason Goemaat

147

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

Documentazione @ ngNonBindable

— Mike Pugh
fonte

6

Puoi anche usare <div> o qualsiasi altro tag, aggiungi semplicemente ng-non-bindable

— Mike Pugh

5

cosa succede se il valore {{value}}è all'interno di un tag di input?

— Timo Huovinen

@TimoHuovinen, per visualizzare le parentesi graffe in un attributo HTML vedi la mia risposta .

— joeytwiddle

@TimoHuovinen Puoi usare ng-non-bindablenell'elemento container, puoi vedere la mia risposta: stackoverflow.com/a/42511222/1407491

— Nabi KAZ

Questo non funziona attualmente; utilizzando Angular 8. La risposta di @joeytwiddle lo ha fatto comunque.

— JE Carter II

28

Modifica: l' aggiunta di \ barra tra parentesi tra parentesi tra virgolette funziona

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

anche questo .. by passa l'interpretazione angolare

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

anche questo ..

{{ person.name }<x>} 

{{ person.name }<!>}

— bh_earth0
fonte

Mi dà unLexer Error

— Jason Goemaat

1

{{'{{' asd '}}'}} e il suo

— bh_earth0

4

Questa è una risposta tardiva a una domanda con una risposta accettata. Se scegli di fornire una nuova risposta, dovresti prendere ulteriori precauzioni per assicurarti che la soluzione funzioni e dovresti fornire ragioni convincenti per cui questa risposta è preferita a quella ampiamente accettata. Inoltre, questo non risponde direttamente alla domanda comunque.

— Claies

Come per questo {{...}}.

— ROMANIA_engineer

11

Nel nostro caso volevamo presentare le parentesi graffe in un segnaposto, quindi dovevano apparire all'interno di un attributo HTML . Abbiamo usato questo:

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

Come puoi vedere, stiamo costruendo una stringa da tre stringhe più piccole, al fine di mantenere separate le parentesi graffe.

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

Ciò evita l'utilizzo in ng-non-bindablemodo da poter continuare a utilizzare gli ng-attributi altrove sull'elemento.

— joeytwiddle
fonte

Funziona (di recente come angolare 8).

— JE Carter II

3

Usa ng-non-bindablenel contenitore, questo è efficace su tutti gli elementi all'interno del contenitore.

<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

Aggiornato per Angular 9

Utilizzare ngNonBindableper sfuggire all'associazione di interpolazione.

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

— opaco
fonte

1

Volevo singole parentesi nel testo e le soluzioni di cui sopra non funzionavano per me. Quindi volevo raccomandare Angular.

Versione angolare: 5

Testo richiesto: il mio nome è {person.name}.

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

Spero che aiuti qualcuno.

— bhavya_karia
fonte