JqLite kullanarak sınıf adına göre bir öğe nasıl seçilir?

110

Daha hafif hale getirmek için Angular.js uygulamamdan jquery'yi kaldırmaya ve bunun yerine Angular'ın jqLite'ını koymaya çalışıyorum. Ancak uygulama, jqLite tarafından desteklenmeyen find ('# id') ve find ('.classname') öğelerini yoğun bir şekilde kullanır, yalnızca 'etiket adları' (belgelere göre)

Bunu değiştirmek için en iyi yaklaşımın ne olacağını merak ettim. Düşündüğüm bir yaklaşım, özel HTML etiketleri oluşturmaktır. örneğin: değiştir
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

için

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

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

için

$element.find('a2b')

Düşüncesi olan var mı? diğer fikirler?

Teşekkürler

Lior

angularjs angularjs-directive jqlite

— Lior
kaynak

ID'ler benzersiz olmalıdır, bu nedenle ID'ye göre başka bir elemanın alt öğesi olan bir öğeyi bulmanın bir anlamı yoktur. Öğeyi kimliğe göre seçmeniz yeterlidir. Kimliğiniz benzersiz değilse, kimliğinizi bir sınıf olarak değiştirin. Ayrıca, DomElement.querySelector(".myclassname")bir css seçici kullanarak tek bir tanımlayıcı öğeyi seçmek için veya Tümü ekleyerek tüm eşleşmeleri seçmek için kullanabilirsiniz : DomElement.querySelectorAll(".myclassname")Bu, elbette IE <9'da çalışmaz.

— Kevin B

Bir a2beleman tanımlarsanız , bir yönerge tanımlamış olmanız gerekir. Direktifin link fonksiyonunda yapılması gerekeni yapabilir ve bu nedenle find () 'ı çağırma ihtiyacını tamamen ortadan kaldırabilir misiniz? Sınıflarınıza benzer şekilde - yönergeleri tanımlayabilir ve ihtiyacınız olan işlevselliği yönergelerin bağlantı (veya derleme) işlevlerine koyabilir misiniz?

— Mark Rajcok

@KevinB Angular'dan jqLite'ın 'yalnızca etiket adlarını' desteklediği söyleniyor

— Lior

@MarkRajcok Bir yönerge tanımlamadım. IE ve chrome'da çalışıyor gibi görünüyor. ama bir direktif tanımlasam bile, neden yardımcı olsun? Yine de bir DOM öğesini edinmem gerekiyor.

— Lior

Find ('span.btn') veya benzeri neden sizin için çalışmıyor?

— Fabi

Yanıtlar:

202

Esasen ve @ kevin-b tarafından belirtildiği gibi:

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

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

Not: Bunu denetleyicilerinizden yapmak istiyorsanız, geliştiriciler kılavuzundaki "Denetleyicileri Doğru Kullanmak" bölümüne bir göz atmak ve sunum mantığınızı uygun yönergelere (<a2b ...> gibi) yeniden düzenlemek isteyebilirsiniz. .

— psema4
kaynak

Teşekkürler! Ricardo Bin cevabından eklemek için ( angular'ın

— Lior

Ne yazık ki, atıfta bulunulan URL artık geçerli değil ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ) ve bu bölümde herhangi bir ikame yok gibi görünüyor.

— Per Quested Aronsson

No. angular.element (document.querySelector ('# id')) şunun alternatifidir: $ ('# id'), for: elementArray.find ('# id')

— Broda Noel

Doğru - ancak uygulamamızın yeni parçalarını açısal olarak oluştururken bulduğumuz gibi, bazen güncellenene veya yeniden faktörlendirilebilene kadar eski parçaları üzerine bir süre "bantlamamız" gerekir. Bizim durumumuzda, mevcut karışıklığı değiştirmeden bazı eski jquery / ajax verilerini yüklememiz gerekiyordu, bu yüzden aşağıdakini yaptık - $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (data);});

— Kenn

Elem bir jqlite nesnesiyseangular.element(elem[0].querySelector('.classname'));

— cleversprocket

angualr, jQuery'nin tüm özelliklerine sahip olmadığı anlamına gelen, jqlite olarak adlandırılan daha hafif jquery sürümünü kullanır. jquery'den ne kullanabileceğinizle ilgili angularjs belgelerinde bir referans var. Açısal Eleman belgeleri

Sizin durumunuzda, kimliği veya sınıf adı olan bir div bulmanız gerekir. sınıf adı için kullanabilirsiniz

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));
}}

veya sorgu seçici ile çok daha basit bir yol kullanabilirsiniz

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

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

jQuery kadar esnek değil ama

— Hannad Rehman
kaynak

Eğer elem.find()sizin için çalışmıyor, sen JQuery komut dosyası dahil olup olmadığını kontrol önce .... açısal senaryo

— ancajic
kaynak

OP özellikle jqLite hakkında soru sorsa da, jQuery kullanan ve find () 'ın sınıflar ve kimliklerle çalışmasını bekleyenler için bu cevap kesinlikle yardımcı olabilir.

— Matt B

Açıklamak gerekirse: "jQuery varsa, angular.element jQuery işlevi için bir takma addır. JQuery kullanılamıyorsa, angular.element, Angular'ın" jQuery lite "veya jqLite adlı yerleşik jQuery alt kümesine delege eder." Alıntı: docs.angularjs.org/api/ng/function/angular.element . jqLite find () içerir.

— Kmaczek