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

Я пытаюсь найти элемент в 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/>

Я пытаюсь получить элемент кнопки по имени файла multi-files, тогда я попробовал

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

Но он не работает и пробовал element.find, но он работает только для тега.

Есть ли какая-либо функция, которая может получить элемент по id или classname в angularjs?

Ответ 1

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

Ответ 2

Вам не нужно добавлять . в getElementsByClassName, т.е.

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

Однако при использовании angular.element вам необходимо использовать селекторы стиля jquery:

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

должен сделать свое дело.

Кроме того, из этой документации "Если jQuery доступен, angular.element является псевдонимом для функции jQuery. Если jQuery недоступен, angular.element делегирует встроенное подмножество Angular jQuery, называемое" jQuery lite "или" jqLite ". ""

Ответ 3

@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

Ответ 4

Если вы хотите найти кнопку только по ее имени класса и только с помощью jQLite, вы можете сделать следующее:

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

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