How to avoid curly braces to display on a page when using AngularJS?

Question

I want the user to see double curly braces, but Angular ties them automatically. This is the opposite case of this question , where they do not want to see the curly braces used to snap when loading the page.

I want the user to see this:

My name is {{person.name}}. 

But Angular replaces {{person.name}} with a value. I thought this might work, but Angular is still replacing it with a value:

 {{person.name}} 

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

Answer 1

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

Documentation @ http://docs.angularjs.org/api/ng.directive:ngNonBindable

Answer 2

Edit: append \ slash between brackets inside quotes

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

this too .. passages angular interpretation

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

it is too..

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

Answer 3

In our case, we wanted to represent curly braces in the placeholder, so they should appear inside the HTML attribute. We used this:

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

As you can see, we create a line of three smaller lines to keep the braces separate.

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

This avoids the use of ng-non-bindable , so we can continue to use the ng- attributes ng- on the element.

Answer 4

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

Answer 5

Use ng-non-bindable in the container, this affects the entire container inside the container.

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