112

Tôi đang cố gắng tìm phần tử trong html bởi angularjs.

Đây là html: 

<button class="btn btn-primary multi-files" type="button">
   <span>Choose multiple files</span>
</button>
<br/><br/>
<input ng-file-select type="file" multiple  style="display: none"/><br/>

Tôi đang cố gắng để có được phần tử nút theo nhiều lớp tên, sau đó tôi đã thử 

var multibutton = angular.element(element.getElementsByClassName(".multi-files"));

Nhưng nó không hoạt động, và đã thử element.findnhưng nó chỉ hoạt động cho thẻ.

Có hàm nào có thể lấy phần tử theo id hoặc classname trong angularjs không?

|
173

getElementsByClassNamelà một chức năng trên Tài liệu DOM. Nó không phải là một hàm jQuery hay jqLite.

Không thêm khoảng thời gian trước tên lớp khi sử dụng nó:

var result = document.getElementsByClassName("multi-files");

Gói nó trong jqLite (hoặc jQuery nếu jQuery được tải trước Angular):

var wrappedResult = angular.element(result);

Nếu bạn muốn chọn từ elementchức năng liên kết trong một lệnh, bạn cần truy cập tham chiếu DOM thay vì tham chiếu jqLite - element[0]thay vì element:

link: function (scope, element, attrs) {

  var elementResult = element[0].getElementsByClassName('multi-files');
}

Ngoài ra, bạn có thể sử dụng document.querySelectorchức năng (cần khoảng thời gian ở đây nếu chọn theo lớp):

var queryResult = element[0].querySelector('.multi-files');
var wrappedQueryResult = angular.element(queryResult);

Bản trình diễn: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

|
  • 1

    Có thể đáng lưu ý rằng bên trong hàm liên kết, Element.childEuityCount có thể là 0 vì góc không có cơ hội tạo các phần tử, vì vậy bạn nên chuẩn bị để đối phó với không có kết quả nào cho phần tử [0] .getEuity .. .

    – Dương Minh Hồng 03:17:17 21/12/2016
27

Bạn không cần phải thêm .vào getElementsByClassName, tức là

var multibutton = angular.element(element.getElementsByClassName("multi-files"));

Hoặc chỉ

angular.element('multi-files');

nên làm thủ thuật.

Ngoài ra, từ tài liệu này "Nếu jQuery có sẵn, angular.element là bí danh cho hàm jQuery. Nếu jQuery không có sẵn, angular.element ủy nhiệm cho tập hợp con jQuery tích hợp của Angular, được gọi là" jQuery lite "hoặc" jqLite. ""

|
  • 1

    xin chào, cảm ơn vì đã trả lời, tôi đã thử nó, nhưng lỗi cho biết chức năng không xác định

    – Vũ Thảo Nghi 12:43:21 12/05/2014
  • 1

    Nó có thể hoặc không thể làm việc, vâng. Vui lòng kiểm tra câu trả lời của tôi ngay bây giờ (thực hiện chỉnh sửa) và có thể bạn sẽ biết phải làm gì.

    – Tạ Bảo Quyên 12:44:39 12/05/2014
  • 1

    Nếu chức năng không được xác định, có lẽ bạn đã không tải jquery. jqlite (được sử dụng nếu bạn không tải jquery như @Ashesh đã đề cập) không có tất cả các chức năng mà jquery có, và getElementsByClassName là một trong số đó.

    – Hoàng Thu Ngân 13:10:15 12/05/2014
  • 1

    angular.element ('nhiều tập tin'); sẽ không hoạt động

    – Thu Thảo Mai 01:31:13 13/08/2015
  • 1

    angular.element ('nhiều tập tin'); sẽ không làm việc Bạn cần thời gian.

    – Lý Thư Sương 23:25:14 25/01/2016
20

Câu trả lời của @ tasseKATT là tuyệt vời, nhưng nếu bạn không muốn thực hiện một chỉ thị, tại sao không sử dụng $document?

.controller('ExampleController', ['$scope', '$document', function($scope, $document) {
  var dumb = function (id) {
  var queryResult = $document[0].getElementById(id)
  var wrappedID = angular.element(queryResult);
  return wrappedID;
};

VÒI

|
4

Nếu bạn muốn tìm nút chỉ bằng tên lớp và chỉ sử dụng jQLite, bạn có thể làm như dưới đây:

var myListButton = $document.find('button').filter(function() {
    return angular.element(this).hasClass('multi-files');
});

Hi vọng điêu nay co ich. :)

|
  • 1

    Không bao giờ sử dụng góc và JQuery cùng nhau ...

    – Trần Lệ Bích 13:51:17 25/09/2015
  • 1

    Điều này không sử dụng góc và jquery, ngoài ra, thống kê không chính xác, bạn thực sự có thể sử dụng jquery để thay thế jqlite. Đây là cách chính xác để làm điều này trong một môi trường góc cạnh, mà không đi xuống phần tử javascript vanilla ($ document [0]).

    – Hoàng Minh Thy 19:12:09 27/10/2016

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.