Comment échapper aux accolades pour les afficher sur la page lors de l'utilisation d'AngularJS?

97

Je veux que l'utilisateur voie les doubles accolades, mais Angular les lie automatiquement. C'est le cas contraire de cette question où ils veulent ne pas voir les accolades utilisées pour la reliure lors du chargement de la page.

Je veux que l'utilisateur voie ceci:

My name is {{person.name}}.

Mais Angular remplace {{person.name}} par la valeur. Je pensais que cela pourrait fonctionner, mais angular le remplace toujours par la valeur:

{{person.name}}

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

angularjs Jason Goemaat
la source
Si vous êtes prêt à utiliser un autre délimiteur (tel que [[ ]]): stackoverflow.com/questions/12923521/…
Thilo
2
Merci, j'ai vu cela, mais tout l'intérêt est vraiment pour une page d'exemple montrant comment les accolades fonctionnent et je veux voir la source pour pouvoir ressembler exactement à ce qui est sur la page montrant l'échantillon si cela a du sens.
Jason Goemaat
duplication possible de Empêcher l'affichage momentané de la notation entre accolades doubles avant que angular.js ne compile / interpole le document
Maxime Lorant
1
@MaximeLorant C'est un problème complètement différent à voir avec la prévention de l'affichage momentané des accolades lorsque la page est en cours de chargement, cette question consiste à les faire s'afficher même après le chargement de la page et à empêcher angular de les lier.
Jason Goemaat

Réponses:

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

Documentation @ ngNonBindable

Mike Pugh
la source
6
Vous pouvez également utiliser <div> ou n'importe quelle balise, ajoutez simplement ng-non-bindable
Mike Pugh
5
et si le {{value}}est à l'intérieur d'une valeur de balise d'entrée?
Timo Huovinen
@TimoHuovinen, pour afficher des accolades dans un attribut HTML, voir ma réponse .
joeytwiddle
@TimoHuovinen Vous pouvez utiliser ng-non-bindabledans l'élément conteneur, vous pouvez voir ma réponse: stackoverflow.com/a/42511222/1407491
Nabi KAZ
Cela ne fonctionne pas actuellement; en utilisant Angular 8. La réponse de @joeytwiddle l'a fait cependant.
JE Carter II
28

Edit: l' ajout de \ slash entre crochets à l'intérieur des guillemets fonctionne

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

cela aussi .. en passant par l'interprétation angulaire

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

cela aussi .. 

{{ person.name }<x>} 

{{ person.name }<!>}
bh_earth0
la source
Gives me aLexer Error
Jason Goemaat
1
{{'{{' asd '}}'}} et son
bh_earth0
4
Il s'agit d'une réponse tardive à une question avec une réponse acceptée. Si vous choisissez de fournir une nouvelle réponse, vous devez prendre des précautions supplémentaires pour vous assurer que la solution fonctionne et fournir des raisons convaincantes pour lesquelles cette réponse est préférée à la réponse largement acceptée. De toute façon, cela ne répond pas directement à la question.
Claies
Comme pour celui-ci {{...}<!---->}.
ROMANIA_engineer
11

Dans notre cas, nous voulions présenter des accolades dans un espace réservé, ils devaient donc apparaître à l'intérieur d'un attribut HTML . Nous avons utilisé ceci:

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

Comme vous pouvez le voir, nous construisons une chaîne à partir de trois chaînes plus petites, afin de garder les accolades séparées.

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

Cela évite d'utiliser ng-non-bindable afin que nous puissions continuer à utiliser des ng-attributs ailleurs sur l'élément.

joeytwiddle
la source
Fonctionne (aussi récemment que angulaire 8).
JE Carter II
3

Utilisation ng-non-bindableen conteneur, ceci est efficace sur tous les éléments à l'intérieur du conteneur.

<div ng-non-bindable>
  <span>{{person.name}}</span>
  <img src="#" alt="{{person.name}}">
  <input placeholder="{{person.name}}">
</div>
Nabi KAZ
la source
3 
<span>{{</span>{{variable.name}}<span>}}</span>
ÉchapperNetscape
la source
1

Mis à jour pour Angular 9

Utilisez ngNonBindablepour échapper à la liaison d'interpolation.

<div ngNonBindable>
  My name is {{person.name}}
</div>
Mat
la source
1

Je voulais des crochets simples dans le texte et les solutions ci-dessus ne fonctionnaient pas pour moi. Je voulais donc que l'Angular soit recommandé.

Version angulaire: 5

Texte obligatoire: Je m'appelle {person.name}.

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

J'espère que cela aide quelqu'un.

bhavya_karia
la source