Teropong isolasi direktif dengan ng-repeat scope di AngularJS

Saya memiliki arahan dengan isolate-scope (sehingga saya dapat menggunakan kembali arahan di tempat lain), dan ketika saya menggunakan arahan ini dengan ng-repeat, itu gagal berfungsi.

Saya telah membaca semua dokumentasi dan jawaban Stack Overflow tentang topik ini dan memahami masalahnya. Saya yakin saya telah menghindari semua tipu muslihat biasa.

Jadi saya mengerti bahwa kode saya gagal karena cakupan yang dibuat oleh ng-repeatdirektif. Direktif saya sendiri membuat lingkup-isolasi dan melakukan pengikatan data dua arah ke objek dalam lingkup induk. Direktif saya akan menetapkan nilai objek baru ke variabel terikat ini dan ini berfungsi dengan sempurna ketika direktif saya digunakan tanpa ng-repeat(variabel induk diperbarui dengan benar). Namun, dengan ng-repeat, tugas membuat variabel baru dalam ng-repeatcakupan dan variabel induk tidak melihat perubahannya. Semua ini seperti yang diharapkan berdasarkan apa yang telah saya baca.

Saya juga membaca bahwa ketika ada beberapa arahan pada elemen tertentu, hanya satu ruang lingkup yang dibuat. Dan bahwa a prioritydapat disetel di setiap arahan untuk menentukan urutan penerapan arahan; direktif diurutkan berdasarkan prioritas dan kemudian fungsi kompilasinya dipanggil (cari kata prioritas di http://docs.angularjs.org/guide/directive ).

Jadi saya berharap saya dapat menggunakan prioritas untuk memastikan bahwa arahan saya berjalan terlebih dahulu dan akhirnya membuat lingkup-isolasi, dan ketika ng-repeatdijalankan, itu menggunakan kembali lingkup-isolasi daripada membuat lingkup yang secara prototipikal mewarisi dari lingkup induk. The ng-repeatnegara dokumentasi yang yang berjalan direktif pada tingkat prioritas 1000. Tidak jelas apakah 1itu tingkat prioritas yang lebih tinggi atau tingkat prioritas yang lebih rendah. Ketika saya menggunakan tingkat prioritas 1dalam arahan saya, tidak ada bedanya, jadi saya mencoba 2000. Tapi itu memperburuk keadaan: ikatan dua arah undefinedsaya menjadi dan arahan saya tidak menampilkan apa pun.

Saya telah membuat biola untuk menunjukkan masalah saya . Saya telah mengomentari prioritypengaturan dalam arahan saya. Saya memiliki daftar objek nama dan direktif disebut name-rowyang menunjukkan bidang nama depan dan belakang di objek nama. Ketika nama yang ditampilkan diklik, saya ingin mengatur selectedvariabel dalam lingkup utama. Larik nama, selectedvariabel diteruskan ke name-rowdirektif menggunakan data-binding dua arah.

Saya tahu bagaimana membuat ini bekerja dengan memanggil fungsi di lingkup utama. Saya juga tahu bahwa jika selectedada di dalam objek lain, dan saya mengikat objek luar, semuanya akan bekerja. Tetapi saya tidak tertarik dengan solusi tersebut saat ini.

Sebaliknya, pertanyaan yang saya miliki adalah:

• Bagaimana cara mencegah ng-repeatpembuatan cakupan yang secara prototipikal mewarisi dari lingkup induk, dan malah membuatnya menggunakan lingkup-isolasi direktif saya?
• Mengapa tingkat prioritas 2000dalam arahan saya tidak berfungsi?
• Dengan Batarang, apakah mungkin untuk mengetahui jenis scope yang digunakan?

Oke, melalui banyak komentar di atas, saya menemukan kebingungannya. Pertama, beberapa poin klarifikasi:

• ngRepeat tidak memengaruhi cakupan isolasi yang Anda pilih
• parameter yang dikirimkan ke ngRepeat untuk digunakan pada atribut direktif Anda jangan menggunakan lingkup prototypically-mewarisi
• alasan direktif Anda tidak berfungsi tidak ada hubungannya dengan lingkup isolate

Berikut adalah contoh dari kode yang sama tetapi dengan perintah yang dihapus:

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Berikut adalah JSFiddle yang menunjukkan bahwa itu tidak akan berhasil. Anda mendapatkan hasil yang sama persis seperti dalam arahan Anda.

Mengapa tidak berhasil? Karena cakupan di AngularJS menggunakan pewarisan prototipe. Nilai selectedpada lingkup induk Anda adalah primitif . Dalam JavaScript, ini berarti akan ditimpa ketika seorang anak menetapkan nilai yang sama. Ada aturan emas dalam cakupan AngularJS: nilai model harus selalu ada .di dalamnya. Artinya, mereka tidak boleh primitif. Lihat jawaban SO ini untuk informasi lebih lanjut.

Berikut adalah gambaran dari tampilan awal scope.

Setelah mengklik item pertama, cakupannya sekarang akan terlihat seperti ini:

Perhatikan bahwa selectedproperti baru telah dibuat pada cakupan ngRepeat. Cakupan pengontrol 003 tidak diubah.

Anda mungkin bisa menebak apa yang terjadi saat kita mengklik item kedua:

Jadi masalah Anda sebenarnya tidak disebabkan oleh ngRepeat sama sekali - ini disebabkan oleh pelanggaran aturan emas di AngularJS. Cara untuk memperbaikinya adalah dengan menggunakan properti objek:

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Ini adalah JSFiddle kedua yang menunjukkan bahwa ini juga berfungsi.

Berikut adalah tampilan cakupan awalnya:

Setelah mengklik item pertama:

Di sini, lingkup pengontrol terpengaruh, seperti yang diinginkan.

Juga, untuk membuktikan bahwa ini masih akan bekerja dengan direktif Anda dengan lingkup terisolasi (karena, sekali lagi, ini tidak ada hubungannya dengan masalah Anda), berikut adalah JSFiddle untuk itu juga, tampilan harus mencerminkan objek. Anda akan mencatat bahwa satu-satunya perubahan yang diperlukan adalah menggunakan objek, bukan primitif .

Cakupan awalnya:

Cakupan setelah mengklik item pertama:

Sebagai kesimpulan: sekali lagi, masalah Anda bukan pada lingkup isolate dan bukan pada cara kerja ngRepeat. Masalah Anda adalah bahwa Anda melanggar aturan yang diketahui menyebabkan masalah ini. Model di AngularJS harus selalu memiliki ..

Tanpa secara langsung mencoba menghindari menjawab pertanyaan Anda, sebagai gantinya lihatlah biola berikut:

http://jsfiddle.net/dVPLM/

Poin kuncinya adalah bahwa alih-alih mencoba melawan dan mengubah perilaku konvensional Angular, Anda dapat menyusun arahan Anda untuk bekerja ng-repeatdaripada mencoba menimpanya.

Di template Anda:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

Dalam arahan Anda:

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

Menanggapi pertanyaan Anda:

• ng-repeat akan membuat ruang lingkup, Anda seharusnya tidak mencoba mengubah ini.
• Prioritas dalam direktif bukan hanya urutan eksekusi - lihat: AngularJS: Bagaimana kompilator HTML mengatur urutan kompilasi?
• Di Batarang, jika Anda memeriksa tab kinerja, Anda dapat melihat ekspresi terikat untuk setiap cakupan, dan memeriksa apakah ini sesuai dengan harapan Anda.