Angular lazy mengikat satu kali untuk ekspresi

93

AngularJS memiliki fitur baru sejak versi 1.3.0-beta.10: "pengikatan satu kali malas" .

Ekspresi sederhana dapat diawali dengan ::, memberi tahu angular untuk berhenti menonton setelah ekspresi dievaluasi pertama kali. Contoh umum yang diberikan adalah seperti:

<div>{{::user.name}}</div>

Apakah ada sintaks yang serupa untuk ekspresi seperti berikut ini?

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}"></div>
javascript angularjs binding lazy-evaluation seldary
sumber
Lihat dokumen sudut untuk penjelasan rinci: docs.angularjs.org/guide/expression#one-time-binding
Akshay Gundewar

Jawaban:

160

Iya. Anda dapat mengawali setiap ekspresi dengan ::, bahkan yang di dalam ngIfatau ngClass:

<div ng-if="::(user.isSomething && user.isSomethingElse)"></div>
<div ng-class="::{classNameFoo: user.isSomething}"></div>

Sebenarnya, kodenya hanya memeriksa bahwa dua karakter pertama dalam ekspresi adalah :untuk mengaktifkan pengikatan satu kali (dan kemudian menghapusnya, sehingga tanda kurung bahkan tidak diperlukan). Yang lainnya tetap sama.

Lubang hitam
sumber
3
Ini menjawab pertanyaan saya, meskipun beberapa fitur baru tidak berfungsi dengan baik: <div ng-if="::user.isSomething"></div>dan <div ng-if="::(!user.isSomething)"></div>keduanya dirender. Ia bekerja tanpa "::".
seldary
@seldary Saya tidak bisa mereproduksi masalah. Setiap ekspresi yang diawali dengan ::bekerja dengan baik untuk saya, seperti yang dijelaskan dalam pengeditan saya. Bisakah Anda membuat biola, jika ragu?
Blackhole
7
Pada awalnya tampaknya tidak berfungsi untuk saya juga, dengan ngClass yang memiliki beberapa kelas yang ditentukan. Saya segera menemukan bahwa pengikatan masih terikat karena beberapa variabel yang diamati yang digunakan dalam ngClass belum ditentukan (dan kita tahu bahwa sudut akan menunggu nilai didefinisikan terlebih dahulu sebelum melepaskan pengamat). Berikut biola kecil untuk menunjukkan perilaku ini jsfiddle.net/2LkyLoop .
Denis Pshenov
1
Sintaks bindonce @MaxRocket ditambahkan dalam angular 1.3. Jadi tidak akan berfungsi di 1.2 atau lebih rendah
Berty
2
Pengikatan ng-if satu kali tampaknya tidak berhasil. Jumlah pengamat sangat tinggi dengan atau tanpa:: . Ini berfungsi dengan baik untuk ng-class, tetapi ng-if tampaknya tidak mematuhi satu kali pengikatan untuk saya (1.5.6). Perhatikan bahwa saya mencoba mengikat satu arah properti objek yang berasal dari ng-repeat. Tidak yakin apakah itu membuat perbedaan.
AgmLauncher