Bagaimana cara melepaskan tanda kurung kurawal untuk tampilan di halaman saat menggunakan AngularJS?


97

Saya ingin pengguna melihat tanda kurung kurawal ganda, tetapi Angular mengikatnya secara otomatis. Ini adalah kasus kebalikan dari pertanyaan ini di mana mereka ingin tidak melihat tanda kurung kurawal yang digunakan untuk mengikat saat halaman sedang dimuat.

Saya ingin pengguna melihat ini:

My name is {{person.name}}.

Tapi Angular menggantikannya {{person.name}}dengan nilai. Saya pikir ini mungkin berhasil, tetapi sudut masih menggantikannya dengan nilai:

{{person.name}}

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


Jika Anda ingin menggunakan pembatas lain sama sekali (seperti [[ ]]): stackoverflow.com/questions/12923521/…
Thilo

2
Terima kasih, saya melihatnya tetapi intinya adalah benar-benar untuk halaman sampel yang menunjukkan cara kerja kawat gigi dan saya ingin melihat sumbernya agar dapat terlihat persis seperti apa yang ada di halaman yang menunjukkan sampel jika itu masuk akal.
Jason Goemaat


1
@MaximeLorant Itu adalah masalah yang sama sekali berbeda untuk dilakukan dengan mencegah tampilan sesaat dari kurung kurawal saat halaman sedang dimuat, pertanyaan ini adalah tentang membuat mereka untuk ditampilkan bahkan setelah halaman telah dimuat dan untuk mencegah sudut mengikat mereka.
Jason Goemaat

Jawaban:


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

Dokumentasi @ ngNonBindable


6
Anda juga dapat menggunakan <div> atau tag apa pun, cukup tambahkan ng-non-bindable
Mike Pugh

5
bagaimana jika di {{value}}dalam nilai tag masukan?
Timo Huovinen

@TimoHuovinen, untuk menampilkan tanda kurung kurawal dalam atribut HTML lihat jawaban saya .
joeytwiddle

@TimoHuovinen Anda dapat menggunakan ng-non-bindableelemen kontainer, Anda dapat melihat jawaban saya: stackoverflow.com/a/42511222/1407491
Nabi KAZ

Ini tidak berfungsi saat ini; menggunakan Angular 8. Namun jawaban @joeytwiddle melakukannya.
JE Carter II

28

Edit: menambahkan \ garis miring di antara tanda kurung di dalam tanda kutip berfungsi

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

ini juga .. dengan melewati penafsiran sudut

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

ini juga ..

{{ person.name }<x>} 

{{ person.name }<!>}

Memberi sayaLexer Error
Jason Goemaat

1
{{'{{' asd '}}'}} bagaimana dengan miliknya
bh_earth0

4
Ini adalah jawaban terlambat untuk pertanyaan dengan jawaban yang diterima. Jika Anda memilih untuk memberikan jawaban baru, Anda harus mengambil tindakan pencegahan ekstra untuk memastikan solusi tersebut berfungsi, dan harus memberikan alasan yang meyakinkan mengapa jawaban ini lebih disukai daripada jawaban yang diterima secara luas. Juga, ini tidak secara langsung menjawab pertanyaan itu.
Claies

Seperti yang ini {{...}<!---->}.
ROMANIA_engineer

11

Dalam kasus kami, kami ingin menampilkan tanda kurung kurawal di placeholder, jadi mereka harus muncul di dalam atribut HTML . Kami menggunakan ini:

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

Seperti yang Anda lihat, kami sedang membangun sebuah string dari tiga string yang lebih kecil, untuk menjaga agar kurung kurawal tetap terpisah.

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

Ini menghindari penggunaan ng-non-bindablesehingga kita dapat terus menggunakan ng-atribut di tempat lain pada elemen tersebut.


Bekerja (baru-baru ini sudut 8).
JE Carter II

3

Gunakan ng-non-bindabledalam wadah, ini berlaku untuk semua elemen di dalam wadah ini.

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


1

Diperbarui untuk Angular 9

Gunakan ngNonBindableuntuk keluar dari pengikatan interpolasi.

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

1

Saya ingin tanda kurung tunggal di seluruh teks dan solusi di atas tidak berhasil untuk saya. Begitu pula ingin Angular direkomendasikan.

Versi Sudut: 5

Teks yang Diperlukan: Nama saya {person.name}.

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

Saya harap ini membantu seseorang.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.