使用AngularJS时,如何逃避花括号以便在页面上显示？

Question

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

我希望用户看到这个:

My name is {{person.name}}.

但Angular取代{{person.name}}了价值.我认为这可能会起作用,但angular仍会将其替换为值:

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

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

Answer 1

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

Answer 2

编辑: 在引号内的括号之间添加\斜杠工作

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

这也是...通过角度解释

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

这个也是 ..

{{ person.name }<x>} 

{{ person.name }<!>}

对于一个已接受答案的问题,这是一个迟到的答案.如果您选择提供新答案,则应采取额外的预防措施以确保解决方案有效,并应提供令人信服的理由,说明为什么此答案优先于广泛接受的答案.而且,这并不能直接回答这个问题. (4认同)

Answer 3

在我们的例子中,我们想在占位符中显示大括号,因此它们需要出现在HTML 属性中.我们用过这个:

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

如您所见,我们正在从三个较小的字符串构建一个字符串,以保持花括号分开.

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

这避免了使用,ng-non-bindable因此我们可以继续使用ng-元素上的其他属性.

Answer 4

更新为 Angular 9

用于ngNonBindable转义插值绑定。

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