Làm thế nào để chọn một phần tử theo tên lớp bằng jqLite?

110

Tôi đang cố gắng xóa jquery khỏi ứng dụng Angular.js của mình để làm cho nó nhẹ hơn và thay vào đó đặt jqLite của Angular. Tuy nhiên, ứng dụng sử dụng nhiều hàm find ('# id') và find ('.classname'), không được jqLite hỗ trợ, chỉ có 'tag name' (theo tài liệu)

tự hỏi bạn cảm thấy điều gì sẽ là cách tốt nhất để thay đổi nó. Một cách tiếp cận mà tôi nghĩ đến là tạo các thẻ HTML tùy chỉnh. ví dụ: thay đổi
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

đến

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

và

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

đến

$element.find('a2b')

Có suy nghĩ gì không? những ý tưởng khác?

cảm ơn

Lior

angularjs angularjs-directive jqlite

— Lior
nguồn

ID phải là duy nhất, do đó không có ý nghĩa gì khi tìm một phần tử là con của một phần tử khác theo ID. Đơn giản chỉ cần chọn phần tử theo Id. Nếu Id của bạn không phải là duy nhất, hãy thay đổi ID của bạn thành một lớp. Ngoài ra, bạn có thể sử dụng DomElement.querySelector(".myclassname")để chọn một phần tử con bằng cách sử dụng bộ chọn css hoặc tất cả đối sánh bằng cách thêm Tất cả vào nó: DomElement.querySelectorAll(".myclassname")Tất nhiên điều đó không hoạt động trong IE <9.

— Kevin B

Nếu bạn xác định một a2bphần tử, bạn phải xác định một chỉ thị. Bạn có thể thực hiện những gì cần làm trong hàm liên kết của chỉ thị và do đó tránh hoàn toàn việc phải gọi find () không? Tương tự với các lớp của bạn - bạn có thể xác định các chỉ thị và đưa chức năng bạn cần vào các hàm liên kết (hoặc biên dịch) của chỉ thị không?

— Mark Rajcok

@KevinB Angular's jqLite được cho là hỗ trợ 'chỉ các tên thẻ'

— Lior

@MarkRajcok Tôi không xác định một chỉ thị. nó dường như hoạt động trong IE và chrome. nhưng ngay cả khi tôi định nghĩa một chỉ thị, tại sao nó sẽ hữu ích? Tôi vẫn cần nắm giữ một phần tử DOM.

— Lior

Tại sao tìm ('span.btn') hoặc tương tự không hoạt động với bạn?

— Fabi

Câu trả lời:

202

Về cơ bản, và như đã lưu ý bởi @ 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'))

Lưu ý: Nếu bạn đang tìm cách thực hiện việc này từ bộ điều khiển của mình, bạn có thể muốn xem phần "Sử dụng bộ điều khiển đúng cách" trong hướng dẫn dành cho nhà phát triển và cấu trúc lại logic bản trình bày của bạn thành các lệnh thích hợp (chẳng hạn như <a2b ...>) .

— psema4
nguồn

Cảm ơn! để thêm từ câu trả lời Ricardo Bin (danh sách gửi thư của góc), bạn cũng có thể sử dụng $ document injection

— Lior

Rất tiếc, URL được giới thiệu không còn hợp lệ ( docs.angularjs.org/guide/dev_guide.mvc.undilities_controller ) và dường như không có bất kỳ sự thay thế nào trong phần đó.

— Per Quested Aronsson

Không. Angle.element (document.querySelector ('# id')) là lựa chọn thay thế cho: $ ('# id'), không phải cho: elementArray.find ('# id')

— Broda Noel

Đúng - nhưng như chúng tôi đã nhận thấy khi chúng tôi xây dựng các phần mới của ứng dụng theo góc cạnh, đôi khi chúng tôi cần "dán băng keo" các phần cũ hơn vào nó một lúc cho đến khi chúng có thể được cập nhật hoặc kiểm tra lại. Trong trường hợp của chúng tôi, chúng tôi cần tải một số dữ liệu jquery / ajax cũ mà không sửa đổi mớ hỗn độn hiện có, vì vậy chúng tôi đã thực hiện như sau- $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angle.element (document.querySelector ('# userTasksContainer')). html (data);});

— Kenn

Nếu elem là một đối tượng jqlite nó sẽ làangular.element(elem[0].querySelector('.classname'));

— cleversprocket

angualr sử dụng phiên bản jquery nhẹ hơn được gọi là jqlite, có nghĩa là nó không có tất cả các tính năng của jQuery. đây là tài liệu tham khảo trong tài liệu anglejs về những gì bạn có thể sử dụng từ jquery. Tài liệu về phần tử góc

Trong trường hợp của bạn, bạn cần tìm một div có ID hoặc tên lớp. cho tên lớp bạn có thể sử dụng

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

hoặc bạn có thể sử dụng cách đơn giản hơn nhiều bằng bộ chọn truy vấn

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

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

nó không linh hoạt như jQuery nhưng

— hannad rehman
nguồn

Nếu elem.find()không phù hợp với bạn, hãy kiểm tra xem bạn có đang bao gồm tập lệnh JQuery trước tập lệnh góc ...

— ancajic
nguồn

Mặc dù OP đã hỏi cụ thể về jqLite, đối với những người sử dụng jQuery và mong đợi find () hoạt động với các lớp và ID cũng như câu trả lời này chắc chắn có thể hữu ích.

— Matt B

Để làm rõ: "Nếu có jQuery, thì angle.element là bí danh của hàm jQuery. Nếu không có jQuery, thì angle.element sẽ ủy nhiệm cho tập con jQuery được tích hợp sẵn của Angular, được gọi là" jQuery lite "hoặc jqLite.". Trích dẫn từ: docs.angularjs.org/api/ng/osystem/angular.element . jqLite chứa find ().

— Kmaczek