Jak zdobyć element za pomocą nazwy klasy lub identyfikatora

Próbuję znaleźć element w html przez angularjs.

Oto 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/>

Próbuję uzyskać element przycisku na podstawie wielu plików z nazwą klasy, a potem próbowałem

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

Ale to nie działa i próbowałem, element.findale działa tylko dla tagu.

Czy jest jakaś funkcja, która może pobrać element przez id lub nazwę klasy w angularjs?

getElementsByClassNamejest funkcją w dokumencie DOM. Nie jest to funkcja jQuery ani jqLite.

Nie dodawaj kropki przed nazwą klasy podczas jej używania:

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

Owiń go w jqLite (lub jQuery, jeśli jQuery jest ładowany przed Angular):

var wrappedResult = angular.element(result);

Jeśli chcesz wybrać z elementfunkcji link w dyrektywie, musisz uzyskać dostęp do odwołania DOM zamiast odwołania do jqLite - element[0]zamiast element:

link: function (scope, element, attrs) {

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

Alternatywnie możesz skorzystać z document.querySelectorfunkcji (w przypadku wyboru według zajęć potrzebna jest kropka):

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

Demo: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

Nie musisz dodawać .in getElementsByClassName, tj

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

Jednak podczas używania angular.elementmusisz używać selektorów stylu jquery:

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

powinien załatwić sprawę.

Również z tej dokumentacji „Jeśli jQuery jest dostępne, angular.element jest aliasem dla funkcji jQuery. Jeśli jQuery nie jest dostępne, angular.element deleguje do wbudowanego w Angulara podzbioru jQuery, zwanego„ jQuery lite ”lub„ jqLite. „”

Odpowiedź @ tasseKATT jest świetna, ale jeśli nie chcesz tworzyć dyrektywy, dlaczego nie użyć $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

Jeśli chcesz znaleźć przycisk tylko po nazwie klasy i używając tylko jQLite, możesz zrobić to, co poniżej:

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

Mam nadzieję że to pomoże. :)