使用AngularJS时，如何在页面上显示花括号来显示？

我希望用户看到双花括号，但Angular自动绑定它们。 这是这个问题的相反的情况，他们不想看到加载页面时用于绑定的大括号。

我想让用户看到这个：

My name is {{person.name}}. 

但是Angular用这个值replace了{{person.name}} 。 我认为这可能工作，但angular仍然取代它的价值：

 {{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

编辑：join引号内的括号之间的\ slash工程

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

这也..通过angular度解读

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

这个也是 ..

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

Answer 3

在我们的例子中，我们想要在占位符中显示大括号，所以他们需要出现在HTML 属性中 。 我们使用这个：

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

正如你所看到的，我们正在用三个较小的stringbuild立一个string，以保持大括号分开。

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

这避免了使用ng-non-bindable ng-所以我们可以继续在元素的其他地方使用ng-属性。

Answer 4

在容器中使用ng-non-bindable ，这对容器内的所有元素都有效。

 <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>