วิธีรับองค์ประกอบตามชื่อคลาสหรือรหัส

ฉันกำลังพยายามค้นหาองค์ประกอบใน html โดย angularjs

นี่คือ 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/>

ฉันพยายามรับองค์ประกอบปุ่มตามชื่อคลาสหลายไฟล์จากนั้นฉันก็ลอง

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

แต่ไม่ได้ผลและพยายามelement.findแล้ว แต่ใช้ได้กับแท็กเท่านั้น

มีฟังก์ชันใดบ้างที่สามารถรับองค์ประกอบตาม id หรือ classname ใน angularjs ได้หรือไม่?

getElementsByClassNameเป็นฟังก์ชันบนเอกสาร DOM ไม่ใช่ทั้ง jQuery หรือฟังก์ชัน jqLite

อย่าใส่ช่วงเวลาก่อนชื่อชั้นเรียนเมื่อใช้:

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

ห่อไว้ใน jqLite (หรือ jQuery ถ้า jQuery ถูกโหลดก่อน Angular):

var wrappedResult = angular.element(result);

หากคุณต้องการเลือกจากelementฟังก์ชันลิงก์ในคำสั่งคุณต้องเข้าถึงการอ้างอิง DOM แทนการอ้างอิง jqLite - element[0]แทนที่จะเป็นelement:

link: function (scope, element, attrs) {

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

หรือคุณสามารถใช้document.querySelectorฟังก์ชันนี้ได้ (ต้องการจุดที่นี่หากเลือกตามคลาส):

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

การสาธิต: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

คุณไม่จำเป็นต้องเพิ่ม.ในgetElementsByClassNameเช่น

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

อย่างไรก็ตามเมื่อใช้angular.elementคุณต้องใช้ตัวเลือกสไตล์ jquery:

angular.element('.multi-files');

ควรทำเคล็ดลับ

นอกจากนี้จากเอกสารนี้ "หากมี jQuery ให้ใช้ angular.element เป็นนามแฝงสำหรับฟังก์ชัน jQuery หากไม่มี jQuery angular.element จะมอบสิทธิ์ให้กับ jQuery ในตัวของ Angular ซึ่งเรียกว่า" jQuery lite "หรือ" jqLite ""

คำตอบของ @ tasseKATT ดีมาก แต่ถ้าคุณไม่ต้องการสร้างคำสั่งทำไมไม่ใช้$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;
};

PLUNKR

หากคุณต้องการค้นหาปุ่มตามชื่อคลาสและใช้ jQLite เท่านั้นคุณสามารถทำได้ดังนี้:

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

หวังว่านี่จะช่วยได้ :)