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

Question

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

我希望用户看到这个：

My name is {{person.name}}.

但Angular用值替换{{person.name}}。我认为这可能有效，但有角度仍然用值替换它：

{{person.name}}

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

Answer 1

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

文档@ ngNonBindable

Answer 2

修改：在引号内的括号之间添加\斜杠

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

这也是通过角度解释

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

这也是..

{{ person.name }<x>} 

{{ person.name }<!>}

Answer 3

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

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

正如您所看到的，我们正在从三个较小的字符串构建一个字符串，以便将花括号分开。

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

这可以避免使用ng-non-bindable，因此我们可以继续在元素的其他位置使用ng-属性。

Answer 4

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

Answer 5

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

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

Answer 6

已针对Angular 9更新

使用ngNonBindable逃脱插值绑定。

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

Answer 7

我想要在文本中使用方括号，而上述解决方案对我而言不起作用。想要Angular推荐也是如此。

角度版本：5

必填文本：我的名字是{person.name}。

<span>My name is {{'{'}}person.name{{'}'}}.</span>

我希望它能对某人有所帮助。

Answer 8

来自Angular编译器：

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

所以在原始问题中，您最终会得到：

My name is {{ '{' }}{{ '{' }}person.name{{ '}' }}{{ '}' }}