ฉันจะหลีกเลี่ยงวงเล็บปีกกาเพื่อแสดงบนหน้าเมื่อใช้ AngularJS ได้อย่างไร

ฉันต้องการให้ผู้ใช้เห็นวงเล็บปีกกาสองชั้น แต่ Angular จะผูกโดยอัตโนมัติ นี่เป็นกรณีตรงข้ามของคำถามนี้ที่พวกเขาไม่ต้องการเห็นวงเล็บปีกกาที่ใช้ในการผูกเมื่อหน้ากำลังโหลด

ฉันต้องการให้ผู้ใช้เห็นสิ่งนี้:

My name is {{person.name}}.

แต่ Angular จะแทนที่{{person.name}}ด้วยค่า ฉันคิดว่ามันอาจได้ผล แต่เชิงมุมยังคงแทนที่ด้วยค่า:

{{person.name}}

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

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

เอกสาร @ ngNonBindable

แก้ไข: การเพิ่ม \ slash ระหว่างวงเล็บภายในเครื่องหมายคำพูดใช้ได้ผล

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

เช่นกัน .. โดยผ่านการตีความเชิงมุม

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

นี่ด้วย ..

{{ person.name }<x>} 

{{ person.name }<!>}

ในกรณีที่เราต้องการที่จะนำเสนอในวงเล็บปีกกาตัวยึดเพื่อให้พวกเขาต้องการที่จะปรากฏภายใน HTML แอตทริบิวต์ เราใช้สิ่งนี้:

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

อย่างที่คุณเห็นเรากำลังสร้างสตริงจากสตริงที่เล็กกว่าสามสายเพื่อแยกวงเล็บปีกกาออกจากกัน

'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>

ฉันหวังว่ามันจะช่วยใครสักคน

จากคอมไพเลอร์ Angular:

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

ดังนั้นในคำถามเดิมคุณจะได้รับ:

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