Comment échapper aux accolades pour les afficher sur la page lorsque j'utilise AngularJS ?

Question

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

Je veux que l'utilisateur voie ça :

My name is {{person.name}}.

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

{{person.name}}

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

Answer 1

Edita: L'ajout d'une barre oblique entre parenthèses à l'intérieur des guillemets fonctionne.

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

ceci aussi par des passes angulaires d'interprétation

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

cela aussi

{{ person.name }<x>} 

{{ person.name }<!>}

Answer 2

Dans notre cas, nous voulions présenter les accolades dans un espace réservé, et elles devaient donc apparaître à l'intérieur d'un fichier HTML. attribut . 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 ng- ailleurs dans l'élément.

Answer 3

Mise à jour pour Angular 9

Utilice ngNonBindable pour échapper à la liaison d'interpolation.

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

Answer 4

Utilice ng-non-bindable dans le conteneur, ceci est effectif sur tous les éléments à l'intérieur de ce conteneur.

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

Answer 5

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