AngularJSを使用しているときに、ページに表示するために中括弧をエスケープするにはどうすればよいですか？

ユーザーに二重の波括弧を見てもらいたいのですが、Angularはそれらを自動的にバインドします。これは、ページの読み込み時にバインドに使用される中括弧を見たくないというこの質問の反対のケースです。

ユーザーにこれを見てほしい：

My name is {{person.name}}.

しかし、Angularは{{person.name}}値に置き換えられます。これはうまくいくと思いましたが、angularは次の値に置き換えます：

{{person.name}}

プランカー：http ://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

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

ドキュメンテーション@ ngNonBindable

編集： 引用符内の角かっこの間にスラッシュを追加すると機能します

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

これも..角度解釈をパスすることによって

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

これも ..

{{ person.name }<x>} 

{{ person.name }<!>}

この例では、中かっこをプレースホルダーに表示するため、HTML 属性内に表示する必要がありました。これを使用しました：

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

ご覧のとおり、中かっこを分離しておくために、3つの小さい文字列から文字列を作成しています。

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

これは使用を回避するng-non-bindableためng-、要素の他の場所で属性を引き続き使用できます。

ng-non-bindableコンテナで使用すると、これはここのコンテナ内のすべての要素で有効です。

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

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

Angular 9用に更新

ngNonBindable補間バインディングをエスケープするために使用します。

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

テキスト全体に単一の括弧を付けたいのですが、上記の解決策ではうまくいきませんでした。したがって、Angularを推奨しました。

角度バージョン：5

必須テキスト：私の名前は{person.name}です。

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

誰かのお役に立てば幸いです。