使用 AngularJS 时，如何避免在页面上显示大括号？

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

我想让用户看到这个:

My name is {{person.name}}.

但是 Angular 用值代替了 {{person.name}}。我认为这可能行得通，但棱角仍然用它的值来代替:

{{person.name}}

http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

48247 次浏览
小开
最佳答案 
<code ng-non-bindable>\{\{person.name}}</code>

Documentation @ ngNonBindable

小开

Edit: adding \ slash between brackets inside the quotes works

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

this too .. by passes angular interpreting

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

this too .. 

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


\{\{ person.name }<!>}
小开

In our case we wanted to present curly brackets in a placeholder, so they needed to appear inside an HTML attribute. We used this:

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

As you can see, we are building up a string from three smaller strings, in order to keep the curly braces separated.

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

This avoids using ng-non-bindable so we can continue to use ng- attributes elsewhere on the element.

小开

Use ng-non-bindable in container, this is effective on all element inside here container.

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

Updated for Angular 9

Use ngNonBindable to escape interpolation binding.

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

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.

小开

From Angular compiler:

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

So in the original question - you would end up with:

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

提交答案