Как получить элемент по имени класса или идентификатору

Я пытаюсь найти элемент в 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но работает только для тега.

Есть ли какая-либо функция, которая может получить элемент по идентификатору или имени класса в 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');
});

Надеюсь это поможет. :)