Mencegah notasi penjepit keriting ganda ditampilkan sebentar sebelum angular.js mengkompilasi / menginterpolasi dokumen

298

Tampaknya menjadi masalah utama di IE ketika ada sejumlah gambar / skrip untuk memuat, mungkin ada sejumlah waktu yang baik di mana literal {{stringExpression}}di markup ditampilkan, kemudian menghilang begitu sudut dilakukan dengan kompilasi / interpolasi dari dokumen.

Adakah alasan umum mengapa ini akan terjadi yang mengindikasikan saya melakukan sesuatu yang umumnya salah, atau adakah cara yang diketahui untuk mencegah hal ini?

angularjs JeremyWeir
sumber
6
Ini bisa membantu: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls
Ismael
Di atas adalah solusi yang tepat
Edmund Rojas

Jawaban:

283

Saya pikir Anda mencari ngCloakarahan: https://docs.angularjs.org/api/ng/directive/ngCloak

Dari dokumentasi:

Arahan ngCloak digunakan untuk mencegah templat html sudut ditampilkan secara singkat oleh browser dalam bentuk mentah (tidak dikompilasi) saat aplikasi Anda sedang memuat. Gunakan arahan ini untuk menghindari efek kedipan yang tidak diinginkan yang disebabkan oleh tampilan templat html.

Arahan dapat diterapkan ke <body>elemen, tetapi penggunaan yang lebih disukai adalah menerapkan beberapa ngCloak arahan ke sebagian kecil halaman untuk memungkinkan rendering progresif dari tampilan browser.

pkozlowski.opensource
sumber
1
Untuk menghindari kode HTML Sudut mentah, apakah sudah ngCloaktersebar luas / praktik terbaik? Sepertinya tidak punya otak, tapi saya tidak berpengalaman di AngularJS.
Kevin Meredith
32
Saya tidak berpikir ini akan berhasil jika Anda memuat semua skrip di akhir tubuh.
trusktr
8
Aaah, tunggu, nvm, jawaban LOAS adalah solusi jika Anda memuat skrip terakhir. Gunakan kelas .ng-cloak.
trusktr
3
Muat skrip angularjs di <head>bagian html Anda ngCloakagar efektif.
Mustafa
1
Saya dapat mengonfirmasi itu berfungsi dengan baik jika saya memuat angular.jsdi <head>bagian halaman saya.
Aron Lorincz
197

Selain itu, Anda dapat menggunakannya <span ng-bind="hello"></span>sebagai gantinya {{hello}}.

http://jsfiddle.net/4LhN9/34/

Andrew Joslin
sumber
94
Salah satu fitur tentang ng-bind yang terkadang diabaikan adalah Anda dapat menentukan teks untuk ditampilkan saat Angular sedang memuat: <span ng-bind = "myScopeProperty"> memuat ... </span>. "memuat ..." akan muncul, lalu diganti setelah myScopeProperty ditentukan.
Mark Rajcok
@MarkRajcok: terima kasih atas tipnya! Saya tidak tahu. Itu sangat sederhana dan elegan dan menyelesaikan masalah yang saya miliki sendiri.
Jim Raden
9
Jika Anda membutuhkan banyak ekspresi, gunakan ngBindTemplate. Misalnya, <span ng-bind-template = "{{scopeProperty1}} {{scopeProperty2}}"> memuat ... </span>
Mark Rajcok
27
Anda juga dapat melakukan {{hello || 'memuat ...'}}
Andrew Joslin
5
@AndyJoslin Bagus. Dengan pendekatan ini, skrip js sudut harus berada di kepala, yang bertentangan dengan bagian bawah halaman, untuk menghindari ekspresi {{}} agar tidak berkedip ketika halaman dimuat.
s_t_e_v_e
51

Untuk meningkatkan efektivitas pendekatan class = 'ng-cloak' ketika skrip dimuat terakhir, pastikan css berikut dimuat di kepala dokumen:

.ng-cloak { display:none; }
LOAS
sumber
4
Menambahkan! Penting juga bukan ide yang buruk.
eomeroff
12
Tidak visibility: hiddenakan lebih baik?
mpen
2
@ eomeroff, tetapi !importantapakah hack CSS (hal buruk) untuk mempromosikan gaya yang akan dipilih, kan? Itu melanggar aturan pemilih CSS.
Kevin Meredith
5
IMHO ini adalah salah satu kasus! Penting diperkenalkan untuk.
lex82
3
@ Mark Saya akan menebak bahwa "visibilitas: tersembunyi" masih akan membuat ruang yang diperlukan untuk markup template, sedangkan "display: none" tidak membuat apa-apa sama sekali. Dengan hanya visibilitas yang disembunyikan, elemen luar mana pun dapat tiba-tiba runtuh ke ukuran bagian dalam yang sebenarnya, alih-alih tumbuh ke ukuran dari ketiadaan. Saya kira itu yang diinginkan seseorang. :)
James Wilkins
40

Tambahkan saja CSS cloaking ke bagian atas halaman atau ke salah satu file CSS Anda:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
    display: none !important;
}

Kemudian Anda dapat menggunakan arahan ngCloak sesuai dengan praktik Angular normal, dan itu akan berfungsi bahkan sebelum Angular sendiri dimuat.

Inilah yang dilakukan Angular: kode di akhir angular.js menambahkan aturan CSS di atas ke bagian atas halaman.

Bennett McElwee
sumber
+1 Saya datang dengan [ngcloak]pemilih sendiri, tetapi ini lebih lengkap.
Pierre Henry
1
Jawaban yang luar biasa! Saya memuat Angular di ujung tubuh saya, jadi ngCloak tidak tersedia dan masih mem-flash {{}}. Ini memperbaikinya.
Scottie
21

Di css Anda, tambahkan folllowing

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
 }

Dan kemudian dalam kode Anda, Anda dapat menambahkan arahan ng-jubah. Sebagai contoh,

<div ng-cloak>
   Welcome {{data.name}}
</div>

Itu dia!

Nathan Senevirathne
sumber
3

Saya setuju dengan jawaban @ pkozlowski.opensource, tetapi kelas ng-clock tidak berhasil untuk saya gunakan dengan ng-repeat. jadi saya ingin merekomendasikan Anda untuk menggunakan kelas untuk ekspresi pembatas sederhana seperti {{name}} dan arahan ngCloak untuk ng-repeat.

<div class="ng-cloak">{{name}}<div>

dan 

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
Jaison
sumber
Terima kasih telah memperhatikan kesalahan saya
Jaison