AngularJS: Mengapa ng-bind lebih baik dari {{}} di angular?

Saya berada di salah satu presentasi sudut dan salah satu orang dalam pertemuan yang disebutkan ng-bindlebih baik daripada {{}}mengikat.

Salah satu alasannya, ng-bindmeletakkan variabel dalam daftar pantauan dan hanya ketika ada model mengubah data didorong untuk melihat, di sisi lain, {{}}akan menginterpolasi ekspresi setiap kali (saya kira itu adalah siklus sudut) dan mendorong nilai, meskipun nilainya berubah atau tidak.

Juga dikatakan bahwa, jika Anda tidak memiliki banyak data di layar Anda dapat menggunakan {{}}dan masalah kinerja tidak akan terlihat. Adakah yang bisa menjelaskan masalah ini untuk saya?

Jika Anda tidak menggunakan ng-bind, gantinya sesuatu seperti ini:

<div>
  Hello, {{user.name}}
</div>

Anda mungkin melihat aktual Hello, {{user.name}}sesaat sebelum user.namediselesaikan (sebelum data dimuat)

Anda bisa melakukan sesuatu seperti ini

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

jika itu masalah bagi Anda.

Solusi lain adalah menggunakan ng-cloak.

Visibilitas:

Saat angularjs Anda bootstrap, pengguna mungkin melihat tanda kurung Anda ditempatkan di html. Ini dapat diatasi dengan ng-cloak. Tetapi bagi saya ini adalah solusi, bahwa saya tidak perlu menggunakan, jika saya menggunakannya ng-bind.

Kinerja:

The {{}}adalah jauh lebih lambat .

Ini ng-bindadalah arahan dan akan menempatkan pengamat pada variabel yang lulus. Jadi ng-bindhanya akan berlaku, ketika nilai yang diteruskan benar-benar berubah .

Kurung di sisi lain akan kotor diperiksa dan disegarkan di setiap $digest , bahkan jika itu tidak perlu .

Saat ini saya sedang membangun aplikasi halaman tunggal besar (~ 500 binding per view). Mengubah dari {{}} menjadi ketat ng-bindmemang menghemat sekitar 20% di setiap scope.$digest.

Saran :

Jika Anda menggunakan modul terjemahan seperti angular-translate , selalu lebih suka arahan sebelum penjelasan tanda kurung.

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

Jika Anda membutuhkan fungsi filter, lebih baik gunakan arahan, yang sebenarnya hanya menggunakan filter kustom Anda. Dokumentasi untuk layanan $ filter

UPDATE 28.11.2014 (tapi mungkin di luar topik):

Di Angular 1.3x bindonce fungsionalitasnya diperkenalkan. Karena itu Anda dapat mengikat nilai ekspresi / atribut sekali (akan terikat ketika! = 'Tidak terdefinisi').

Ini berguna saat Anda tidak mengharapkan ikatan Anda berubah.

Penggunaan: Tempatkan ::sebelum Anda mengikat:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

Contoh:

ng-repeatuntuk menampilkan beberapa data dalam tabel, dengan beberapa binding per baris. Terjemahan-binding, output filter, yang dieksekusi di setiap ringkasan lingkup.

ng-bind lebih baik dari {{...}}

Misalnya, Anda bisa melakukan:

<div>
  Hello, {{variable}}
</div>

Ini berarti bahwa seluruh teks yang Hello, {{variable}}dilampirkan oleh <div>akan disalin dan disimpan dalam memori.

Jika sebaliknya Anda melakukan sesuatu seperti ini:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Hanya nilai dari nilai yang akan disimpan dalam memori, dan angular akan mendaftarkan pengamat (watch expression) yang hanya terdiri dari variabel.

Pada dasarnya sintaks double-curly lebih mudah dibaca dan membutuhkan lebih sedikit pengetikan.

Kedua case menghasilkan output yang sama tetapi .. jika Anda memilih untuk pergi dengan {{}}ada kemungkinan bahwa pengguna akan melihat selama beberapa milidetik {{}}sebelum template Anda di-render oleh angular. Jadi, jika Anda perhatikan, {{}}lebih baik digunakanng-bind .

Juga sangat penting adalah bahwa hanya di index.html aplikasi sudut Anda, Anda dapat membatalkan render {{}}. Jika Anda menggunakan arahan maka templat, tidak ada kesempatan untuk melihat itu karena sudut pertama membuat templat dan setelah menambahkannya ke DOM.

{{...}}dimaksudkan pengikatan data dua arah. Tapi, ng-bind sebenarnya dimaksudkan untuk pengikatan data satu arah.

Menggunakan ng-bind akan mengurangi jumlah pengamat di halaman Anda. Karenanya ng-bind akan lebih cepat dari {{...}}. Jadi, jika Anda hanya ingin menampilkan nilai dan pembaruannya, dan tidak ingin mencerminkan perubahannya dari UI kembali ke controller, maka lanjutkan untuk ng-bind . Ini akan meningkatkan kinerja halaman dan mengurangi waktu pemuatan halaman.

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Ini karena dengan {{}}kompiler sudut mempertimbangkan simpul teks dan induknya karena ada kemungkinan penggabungan 2 {{}}simpul. Karenanya ada tautan tambahan yang menambah waktu buka. Tentu saja untuk beberapa kejadian seperti itu perbedaannya tidak penting, namun ketika Anda menggunakan ini di dalam pengulang sejumlah besar item, itu akan menyebabkan dampak dalam lingkungan runtime yang lebih lambat.

Alasan mengapa Ng-Bind lebih baik karena,

Ketika halaman Anda tidak dimuat atau ketika internet Anda lambat atau ketika situs web Anda memuat setengah, maka Anda dapat melihat jenis masalah ini (Periksa tanda Screen Shot dengan Baca) akan dipicu pada Layar yang benar-benar aneh. Untuk menghindari itu, kita harus menggunakan Ng-bind

ng-bind memiliki masalah juga. Ketika Anda mencoba menggunakan filter sudut , batas atau sesuatu yang lain, Anda mungkin dapat memiliki masalah jika Anda menggunakan ng-bind . Tetapi dalam kasus lain, ng-bind lebih baik di sisi UX. Ketika pengguna membuka halaman, ia akan melihat (10ms-100ms) yang mencetak simbol ( {{...}} ), itu sebabnya ng-bind lebih baik .

Ada beberapa masalah yang berkedip-kedip di {{}} seperti ketika Anda me-refresh halaman lalu terlihat spam waktu singkat. Jadi kita harus menggunakan ng-bind alih-alih ekspresi untuk penggambaran data.

ng-bindjuga lebih aman karena direpresentasikan htmlsebagai string.

Jadi misalnya, '<script on*=maliciousCode()></script>'akan ditampilkan sebagai string dan tidak dieksekusi.

Menurut Angular Doc:
Karena ngBind adalah atribut elemen, itu membuat binding tidak terlihat oleh pengguna saat halaman sedang memuat ... itu perbedaan utama ...

Pada dasarnya sampai setiap elemen dom tidak dimuat, kita tidak dapat melihatnya dan karena ngBind adalah atribut pada elemen, ia menunggu sampai dom bermain, ... info lebih lanjut di bawah ini

ngBind
- direktif dalam modul ng

The ngBind atribut memberitahu AngularJS mengganti konten teks dari elemen HTML yang ditentukan dengan nilai ekspresi yang diberikan, dan untuk memperbarui konten teks ketika nilai bahwa perubahan ekspresi.

Biasanya, Anda tidak menggunakan ngBind secara langsung , tetapi Anda menggunakan markup keriting ganda seperti {{ekspresi}} yang mirip tetapi kurang bertele-tele.

Lebih baik menggunakan ngBind daripada {{expression}} jika templat ditampilkan sebentar oleh peramban dalam keadaan mentah sebelum AngularJS mengkompilasinya. Karena ngBind adalah atribut elemen, itu membuat binding tidak terlihat oleh pengguna saat halaman sedang dimuat.

Sebuah solusi alternatif untuk masalah ini akan menggunakan ngCloak direktif. kunjungi di sini

untuk info lebih lanjut tentang ngbind, kunjungi halaman ini: https://docs.angularjs.org/api/ng/directive/ngBind

Anda dapat melakukan sesuatu seperti ini sebagai atribut, ng-bind :

<div ng-bind="my.name"></div>

atau lakukan interpolasi seperti di bawah ini:

<div>{{my.name}}</div>

atau begini dengan atribut ng-cloak di AngularJs:

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-cloak hindari flashing pada dom dan tunggu sampai semua siap! ini sama dengan atribut ng-bind ...

Anda dapat merujuk ke situs ini dan ini akan memberi Anda penjelasan mana yang lebih baik karena saya tahu {{}} ini lebih lambat daripada ng-bind.

http://corpus.hubwiz.com/2/angularjs/16125872.html merujuk situs ini.