AngularJS kullanırken sayfada görüntülemek için kaşlı ayraçlardan nasıl kaçabilirim?

98

Kullanıcının çift kaşlı ayraç görmesini istiyorum, ancak Angular bunları otomatik olarak bağlar. Sayfa yüklenirken ciltleme için kullanılan süslü parantezleri görmek istemedikleri bu sorunun tam tersi durumdur .

Kullanıcının şunu görmesini istiyorum:

My name is {{person.name}}.

Ancak Açısal {{person.name}}, değerle değiştirilir . Bunun işe yarayacağını düşündüm, ancak açısal hala değerle değiştiriyor:

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

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

angularjs

— Jason Goemaat
kaynak

Tamamen başka bir sınırlayıcıyla gitmeye istekliyseniz (örneğin [[ ]]): stackoverflow.com/questions/12923521/…

— Thilo

2

Teşekkürler, bunu gördüm ama asıl mesele, parantezlerin nasıl çalıştığını gösteren örnek bir sayfa için ve eğer mantıklıysa, örneği gösteren sayfadakine tam olarak benzemek için kaynağı görüntülemek istiyorum.

— Jason Goemaat

Angular.js belgeyi derlemeden / araya eklemeden önce çift kaşlı ayraç gösteriminin anlık olarak görüntülenmesini engelle'nin

— Maxime Lorant

1

@MaximeLorant Sayfa yüklenirken süslü parantezlerin anlık olarak görüntülenmesinin engellenmesi ile ilgili tamamen farklı bir konu, bu soru sayfa yüklendikten sonra bile görüntülenmelerini sağlamak ve açısal bağlamayı önlemekle ilgilidir.

— Jason Goemaat

148

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

Belgeler @ ngNonBindable

— Mike Pugh
kaynak

6

<div> veya herhangi bir etiketi de kullanabilirsiniz, sadece ng-non-bindable ekleyin

— Mike Pugh

5

ya {{value}}bir giriş etiketi değerinin içindeyse?

— Timo Huovinen

@TimoHuovinen, bir HTML çıktı küme parantezleri için özniteliği bakın cevabımı .

— joeytwiddle

@TimoHuovinen ng-non-bindableKonteyner elemanında kullanabilirsin , cevabımı görebilirsin: stackoverflow.com/a/42511222/1407491

— Nabi KAZ

Bu şu anda çalışmıyor; Angular 8. kullanarak @joeytwiddle 'ın yanıtı yaptı.

— JE Carter II

29

Düzen: tırnak içinde parantez arasına \ eğik çizgi eklemek işe yarar

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

bu da .. geçerken açısal yorumlama

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

bu da ..

{{ person.name }<x>} 

{{ person.name }<!>}

— bh_earth0
kaynak

Bana birLexer Error

— Jason Goemaat

1

{{'{{' asd '}}'}} peki ya onun

— bh_earth0

4

Bu, cevabı kabul edilmiş bir soruya geç verilen bir cevaptır. Yeni bir cevap vermeyi seçerseniz, çözümün çalıştığından emin olmak için ekstra önlemler almalısınız ve bu cevabın yaygın olarak kabul edilen cevaba tercih edilmesinin nedenini ikna edici nedenler sunmalısınız. Ayrıca, bu zaten soruyu doğrudan yanıtlamaz.

— Claies

Bunun gibi {{...}}.

— ROMANIA_engineer

11

Bizim durumumuzda, süslü parantezleri bir yer tutucuda sunmak istedik, bu nedenle bir HTML niteliği içinde görünmeleri gerekiyordu . Bunu kullandık:

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

Gördüğünüz gibi, küme parantezlerini ayrı tutmak için daha küçük üç dizeden bir dizi oluşturuyoruz.

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

Bu, kullanmaktan kaçınır, ng-non-bindableböylece ng-öznitelikleri öğenin başka bir yerinde kullanmaya devam edebiliriz .

— Joeytwiddle
kaynak

Çalışır (yakın zamanda açısal 8).

— JE Carter II

3

ng-non-bindableKonteynırda kullanın , bu konteynırın içindeki tüm elemanlarda etkilidir.

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

— Nabi KAZ
kaynak

3

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

— EscapeNetscape
kaynak

1

Angular 9 için güncellendi

ngNonBindableEnterpolasyon bağlamadan kaçmak için kullanın .

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

— Mat
kaynak

1

Metin boyunca tek parantezler istedim ve yukarıdaki çözümler benim için işe yaramadı. Öyleyse Angular'ın tavsiye edilmesini istiyordu.

Açısal Sürüm: 5

Gerekli Metin: Adım {person.name}.

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

Umarım birine yardımcı olur.

— bhavya_karia
kaynak

0

Angular derleyiciden:

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

Yani orijinal soruda - sonuçta şu sonuca varacaksınız:

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

— user369142
kaynak