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

97

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

我希望用户看到以下内容：

My name is {{person.name}}.

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

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

柱塞：http：//plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

angularjs

— 杰森·古玛（Jason Goemaat）
source

如果你愿意完全与另一个分隔符去（如[[ ]]）：stackoverflow.com/questions/12923521/...

— 蒂洛

2

谢谢，我看到了，但是重点实际上是一个示例页面，该页面显示了花括号的工作原理，并且我希望查看源代码看起来能够与显示该示例的页面上的内容完全一样（如果可以的话）。

— 詹森·古玛

在angular.js编译/插值文档之前，可能会暂时显示

— Maxime Lorant

1

@MaximeLorant这与防止在页面加载时瞬间显示大括号有关，这是一个完全不同的问题，这个问题是关于即使在页面加载后也要使其显示，并防止角度绑定它们。

— 杰森·古玛

147

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

文档@ ngNonBindable

— 迈克·普格
source

6

您也可以使用<div>或其他标签，只需添加ng-non-bindable

— Mike Pugh 2013年

5

如果{{value}}标记在输入标签值内怎么办？

— Timo Huovinen

@TimoHuovinen，要在HTML 属性中输出大括号，请参阅我的答案。

— joeytwiddle

@TimoHuovinen您可以ng-non-bindable在容器元素中使用，您可以看到我的答案：stackoverflow.com/a/42511222/1407491

— Nabi KAZ

目前这行不通；但是使用Angular8。@joeytwiddle的答案确实做到了。

— JE卡特二世

28

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

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

这也..通过角度解释

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

这个也是 ..

{{ person.name }<x>} 

{{ person.name }<!>}

— bh_earth0
source

给我一个Lexer Error

— Jason Goemaat，2015年

1

{{'{{'asd'}}'}}他呢

— bh_earth0

4

这是问题的较晚答案，且答案已被接受。如果选择提供新答案，则应采取额外的预防措施以确保解决方案有效，并应提供令人信服的理由，说明为什么该答案优于被广泛接受的答案。另外，这仍然不能直接回答问题。

— Claies

喜欢这个{{...}}。

— ROMANIA_engineer

11

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

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

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

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

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

— joeytwiddle
source

作品（最近作为角度8）。

— JE卡特二世

3

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

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

— 纳比·卡兹
source

3

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

— 逃生网景
source

1

更新为Angular 9

使用ngNonBindable逃脱插值结合。

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

— 马特
source

1

我想要在文本中使用方括号，而上述解决方案对我而言不起作用。所以确实想要Angular推荐。

角版本：5

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

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

希望对您有所帮助。

— bhavya_karia
source