Bagaimana cara memilih elemen dengan nama kelas menggunakan jqLite?

110

Saya mencoba untuk menghapus jquery dari aplikasi Angular.js saya untuk membuatnya lebih ringan, dan meletakkan jqLite Angular sebagai gantinya. Tetapi aplikasi menggunakan banyak penggunaan find ('# id') dan find ('.classname'), yang tidak didukung oleh jqLite, hanya 'nama tag' (sesuai dokumentasi)

bertanya-tanya apa yang menurut Anda akan menjadi pendekatan terbaik untuk mengubahnya. Salah satu pendekatan yang saya pikirkan adalah membuat tag HTML khusus. Misalnya: perubahan
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

untuk 

<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>

dan 

$element.find('#add-to-bag')

untuk

$element.find('a2b')

Ada pemikiran? ide lain?

Terima kasih

Lior

angularjs angularjs-directive jqlite Lior
sumber
4
ID harus unik, oleh karena itu tidak masuk akal untuk menemukan elemen yang merupakan turunan dari elemen lain dengan ID. Cukup pilih elemen dengan Id. Jika Id Anda tidak unik, ubah ID Anda menjadi kelas. Selain itu, Anda dapat menggunakan DomElement.querySelector(".myclassname")untuk memilih satu elemen dekendan menggunakan pemilih css, atau semua yang cocok dengan menambahkan Semua ke dalamnya: DomElement.querySelectorAll(".myclassname")Itu tentu saja tidak berfungsi di IE <9.
Kevin B
Jika Anda mendefinisikan sebuah a2belemen, Anda harus mendefinisikan sebuah direktif. Dapatkah Anda melakukan apa yang perlu dilakukan dalam fungsi tautan direktif, dan oleh karena itu menghindari kebutuhan untuk memanggil find () sepenuhnya? Demikian pula dengan kelas Anda - dapatkah Anda mendefinisikan direktif dan memasukkan fungsionalitas yang Anda butuhkan ke dalam fungsi tautan (atau kompilasi) direktif?
Mark Rajcok
2
JqLite @KevinB Angular dikatakan mendukung 'hanya nama tag'
Lior
@ MarkRajcok Saya tidak mendefinisikan direktif. tampaknya berfungsi di IE dan chrome. tetapi bahkan jika saya akan menetapkan arahan, mengapa itu membantu? Saya masih perlu mendapatkan elemen DOM.
Lior
Mengapa find ('span.btn') atau yang serupa tidak berfungsi untuk Anda?
Fabi

Jawaban:

202

Pada dasarnya, dan seperti yang dicatat oleh @ kevin-b:

// find('#id')
angular.element(document.querySelector('#id'))

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

Catatan: Jika Anda ingin melakukan ini dari pengontrol Anda, Anda mungkin ingin melihat bagian "Menggunakan Pengontrol dengan Benar" di panduan pengembang dan mengubah logika presentasi Anda menjadi arahan yang sesuai (seperti <a2b ...>) .

psema4
sumber
3
Terima kasih! untuk menambahkan dari jawaban Ricardo Bin (milis angular), $ document injectable juga dapat digunakan: jsfiddle.net/ricardohbin/fTQcs
Lior
Sayangnya, URL yang dirujuk tidak lagi valid ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ), dan sepertinya tidak ada pengganti di bagian itu.
Per Quested Aronsson
No. angular.element (document.querySelector ('# id')) adalah alternatif untuk: $ ('# id'), bukan untuk: elementArray.find ('# id')
Broda Noel
Benar - tetapi seperti yang telah kami temukan saat kami membangun bagian baru dari aplikasi kami dalam sudut, kami terkadang perlu "menempelkan" bagian yang lebih lama ke atasnya untuk sementara waktu sampai mereka dapat diperbarui atau difaktorkan ulang. Dalam kasus kami, kami perlu memuat beberapa data jquery / ajax lama tanpa mengubah kekacauan yang ada jadi kami melakukan yang berikut- $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (data);});
Kenn
42
Jika elem adalah objek jqlite maka akanangular.element(elem[0].querySelector('.classname'));
cleversprocket
2

angualr menggunakan versi jquery yang lebih ringan yang disebut jqlite yang berarti tidak memiliki semua fitur jQuery. berikut adalah referensi di dokumen angularjs tentang apa yang dapat Anda gunakan dari jquery. Dokumen Angular Element

Dalam kasus Anda, Anda perlu mencari div dengan ID atau nama kelas. untuk nama kelas yang bisa Anda gunakan

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

atau Anda dapat menggunakan cara yang jauh lebih sederhana dengan pemilih kueri

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

itu tidak sefleksibel jQuery tapi apa

hannad rehman
sumber
1

Jika elem.find()tidak berfungsi untuk Anda, periksa apakah Anda menyertakan skrip JQuery sebelum skrip sudut ....

kuno
sumber
3
Meskipun OP secara khusus bertanya tentang jqLite, bagi mereka yang menggunakan jQuery dan mengharapkan find () untuk bekerja dengan kelas dan ID juga, jawaban ini pasti bisa membantu.
Matt B
2
Untuk memperjelas: "Jika jQuery tersedia, angular.element adalah alias untuk fungsi jQuery. Jika jQuery tidak tersedia, angular.element mendelegasikan ke subset bawaan jQuery Angular, yang disebut" jQuery lite "atau jqLite.". Kutipan dari: docs.angularjs.org/api/ng/function/angular.element . jqLite berisi find ().
Kmaczek