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:

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

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

angularjs

— Jason Goemaat
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

147

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

Documentation @ ngNonBindable

— Mike Pugh
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
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
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
source

3

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

— ÉchapperNetscape
source

1

Mis à jour pour Angular 9

Utilisez ngNonBindablepour échapper à la liaison d'interpolation.

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

— Mat
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
source