angularjs - 使用AngularJS时如何转义花括号以在页面上显示？

Question

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

我希望用户看到这个：

My name is {{person.name}}.

但是 Angular 替换{{person.name}}为值。我认为这可能有效，但 angular 仍将其替换为以下值：

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

score 151 · Accepted Answer

151

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

于 2013-06-01T01:44:29.767 回答

score 31 · Accepted Answer

编辑： 在引号内的括号之间添加 \ 斜杠有效

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

这也是..通过角度解释

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

这个也是 ..

{{ person.name }<x>} 

{{ person.name }<!>}

score 13 · Accepted Answer

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

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

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

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

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

score 5 · Accepted Answer

为 Angular 9 更新

用于ngNonBindable转义插值绑定。

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

score 3 · Accepted Answer

3

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

于 2017-09-14T11:57:24.143 回答

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

I wanted single brackets across text and the above solutions didn't work for me. So did want the Angular recommended.

Angular Version: 5

Required Text: My name is {person.name}.

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

I hope it helps someone.

score 0 · Accepted Answer

来自 Angular 编译器：

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

所以在最初的问题中 - 你最终会得到：

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

8 回答 8