วิธีการเลือกองค์ประกอบตามชื่อคลาสโดยใช้ jqLite

110

ฉันกำลังพยายามลบ jquery ออกจากแอพ Angular.js ของฉันเพื่อให้เบาลงและใส่ jqLite ของ Angular แทน แต่แอปใช้การค้นหา ('# id') และ find ('.classname') อย่างหนักซึ่ง jqLite ไม่รองรับมีเพียง 'ชื่อแท็ก' (ตามเอกสารประกอบ)

สงสัยว่าอะไรคือวิธีที่ดีที่สุดในการเปลี่ยนแปลง แนวทางหนึ่งที่ฉันคิดคือสร้างแท็ก HTML ที่กำหนดเอง ตัวอย่างเช่นการเปลี่ยนแปลง
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

ถึง

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

และ

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

ถึง

$element.find('a2b')

ความคิดใด ๆ ? ความคิดอื่น ๆ ?

ขอบคุณ

ลิออร์

angularjs angularjs-directive jqlite

— ลิออร์
แหล่งที่มา

ID ต้องไม่ซ้ำกันดังนั้นจึงไม่มีเหตุผลที่จะค้นหาองค์ประกอบที่เป็นลูกขององค์ประกอบอื่นด้วย ID เพียงแค่เลือกองค์ประกอบตาม Id หาก ID ของคุณไม่ซ้ำกันให้เปลี่ยน ID ของคุณเป็นคลาส นอกจากนี้คุณสามารถใช้DomElement.querySelector(".myclassname")เพื่อเลือกองค์ประกอบหลอกลวงเดียวโดยใช้ตัวเลือก css หรือการจับคู่ทั้งหมดโดยการเพิ่มทั้งหมดลงไป: DomElement.querySelectorAll(".myclassname")แน่นอนว่าใช้ไม่ได้ใน IE <9

— Kevin B

หากคุณกำหนดa2bองค์ประกอบคุณต้องกำหนดคำสั่ง คุณสามารถทำสิ่งที่ต้องทำในฟังก์ชันลิงก์ของคำสั่งและหลีกเลี่ยงความจำเป็นในการเรียก find () ทั้งหมดได้หรือไม่ ในทำนองเดียวกันกับชั้นเรียนของคุณ - คุณสามารถกำหนดคำสั่งและใส่ฟังก์ชันที่คุณต้องการลงในฟังก์ชันลิงก์ (หรือคอมไพล์) ของคำสั่งได้หรือไม่?

— Mark Rajcok

jqLite ของ @KevinB Angular ได้รับการกล่าวขานว่ารองรับ 'เฉพาะชื่อแท็ก'

— Lior

@MarkRajcok ฉันไม่ได้กำหนดคำสั่ง ดูเหมือนว่าจะทำงานใน IE และ chrome แต่ถึงฉันจะกำหนดคำสั่งทำไมมันถึงช่วยได้ ฉันยังคงต้องรับองค์ประกอบ DOM

— Lior

ทำไม find ('span.btn') หรือคล้ายกันไม่ได้ผลสำหรับคุณ?

— Fabi

คำตอบ:

202

โดยพื้นฐานและตามที่ระบุไว้โดย @ 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'))

หมายเหตุ:หากคุณต้องการทำสิ่งนี้จากคอนโทรลเลอร์ของคุณคุณอาจต้องการดูส่วน "การใช้ตัวควบคุมอย่างถูกต้อง" ในคู่มือสำหรับนักพัฒนาและปรับเปลี่ยนตรรกะการนำเสนอของคุณเป็นคำสั่งที่เหมาะสม (เช่น <a2b ... >) .

— psema4
แหล่งที่มา

ขอบคุณ! หากต้องการเพิ่มจากคำตอบของ Ricardo Bin (รายชื่อผู้รับจดหมายเชิงมุม) สามารถใช้ $ document injectionable ได้

— Lior

ขออภัย URL ที่อ้างถึงไม่ถูกต้องอีกต่อไป ( docs.angularjs.org/guide/dev_guide.mvc.understand_controller ) และดูเหมือนจะไม่มีสิ่งใดมาทดแทนในส่วนนั้น

— ตามภารกิจ Aronsson

ไม่ใช่ angular.element (document.querySelector ('# id')) เป็นทางเลือกอื่นแทน: $ ('# id') ไม่ใช่สำหรับ: elementArray.find ('# id')

— Broda Noel

ถูกต้อง - แต่อย่างที่เราพบเมื่อเราสร้างชิ้นส่วนใหม่ของแอปพลิเคชันในเชิงมุมบางครั้งเราจำเป็นต้อง "เทปพันสายไฟ" ชิ้นส่วนที่เก่ากว่าไว้สักระยะหนึ่งจนกว่าจะสามารถปรับปรุงหรือนำกลับมาใช้ใหม่ได้ ในกรณีของเราเราจำเป็นต้องโหลดข้อมูล jquery / ajax เก่า ๆ โดยไม่แก้ไขระเบียบที่มีอยู่ดังนั้นเราจึงทำสิ่งต่อไปนี้ - $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (ข้อมูล);});

— Kenn

ถ้า elem เป็นวัตถุ jqlite ก็จะเป็นangular.element(elem[0].querySelector('.classname'));

— cleversprocket

angualr ใช้ jquery รุ่นที่เบากว่าเรียกว่า jqlite ซึ่งหมายความว่าไม่มีคุณสมบัติทั้งหมดของ jQuery นี่คือข้อมูลอ้างอิงในเอกสาร angularjs เกี่ยวกับสิ่งที่คุณสามารถใช้จาก jquery เอกสาร Angular Element

ในกรณีของคุณคุณต้องหา div ที่มี ID หรือชื่อคลาส สำหรับชื่อคลาสที่คุณสามารถใช้ได้

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

หรือคุณสามารถใช้วิธีที่ง่ายกว่ามากโดยใช้ตัวเลือกการค้นหา

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

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

มันไม่ยืดหยุ่นเท่า jQuery แต่คืออะไร

— ฮันนาดเรห์มาน
แหล่งที่มา

หากelem.find()ไม่ได้ผลให้ตรวจสอบว่าคุณรวมสคริปต์ JQuery ไว้ก่อนสคริปต์เชิงมุม ...

— แอนกาจิก
แหล่งที่มา

แม้ว่า OP จะถามเฉพาะเกี่ยวกับ jqLite แต่สำหรับผู้ที่ใช้ jQuery และคาดหวังว่า find () จะทำงานกับคลาสและ ID ได้เช่นกันคำตอบนี้อาจช่วยได้อย่างแน่นอน

— Matt B

เพื่อชี้แจง: "ถ้า jQuery พร้อมใช้งาน angular.element เป็นนามแฝงสำหรับฟังก์ชัน jQuery หากไม่มี jQuery angular.element จะมอบสิทธิ์ให้กับ jQuery ในตัวของ Angular ซึ่งเรียกว่า" jQuery lite "หรือ jqLite" อ้างจาก: docs.angularjs.org/api/ng/function/angular.element . jqLite มี find ()

— Kmaczek