Comment obtenir un élément par nom de classe ou identifiant

J'essaye de trouver l'élément en html par angularjs.

Voici le 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/>

J'essaie d'obtenir l'élément bouton par nom de classe multi-fichiers, puis j'ai essayé

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

Mais cela ne fonctionne pas, et essayé element.findmais cela ne fonctionne que pour la balise.

Y a-t-il une fonction qui peut obtenir un élément par identifiant ou nom de classe dans angularjs?

getElementsByClassNameest une fonction du document DOM. Ce n'est ni une fonction jQuery ni une fonction jqLite.

N'ajoutez pas le point avant le nom de la classe lorsque vous l'utilisez:

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

Enveloppez-le dans jqLite (ou jQuery si jQuery est chargé avant Angular):

var wrappedResult = angular.element(result);

Si vous souhaitez effectuer une sélection elementdans la fonction de lien d'une directive, vous devez accéder à la référence DOM au lieu de la référence jqLite - element[0]au lieu de element:

link: function (scope, element, attrs) {

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

Vous pouvez également utiliser la document.querySelectorfonction (besoin de la période ici si vous sélectionnez par classe):

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

Démo: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

Vous n'avez pas besoin d'ajouter un .in getElementsByClassName, c'est- à -dire

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

Cependant, lors de l'utilisation angular.element, vous devez utiliser des sélecteurs de style jquery:

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

devrait faire l'affaire.

Aussi, à partir de cette documentation "Si jQuery est disponible, angular.element est un alias pour la fonction jQuery. Si jQuery n'est pas disponible, angular.element délègue au sous-ensemble intégré de jQuery d'Angular, appelé" jQuery lite "ou" jqLite. ""

La réponse de @ tasseKATT est excellente, mais si vous ne voulez pas faire de directive, pourquoi ne pas l'utiliser $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

Si vous voulez trouver le bouton uniquement par son nom de classe et en utilisant uniquement jQLite, vous pouvez faire comme ci-dessous:

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

J'espère que cela t'aides. :)