So erhalten Sie ein Element anhand des Klassennamens oder der ID

Ich versuche, das Element in HTML von anglejs zu finden.

Hier ist das 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/>

Ich versuche, das Schaltflächenelement anhand des Klassennamens Multi-Dateien abzurufen, dann habe ich es versucht

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

Aber es funktioniert nicht und versucht element.find aber es funktioniert nur für Tag.

Gibt es eine Funktion, die ein Element anhand der ID oder des Klassennamens in anglejs abrufen kann?

getElementsByClassNameist eine Funktion im DOM-Dokument. Es ist weder eine jQuery- noch eine jqLite-Funktion.

Fügen Sie bei Verwendung nicht den Punkt vor dem Klassennamen hinzu:

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

Wickeln Sie es in jqLite (oder jQuery, wenn jQuery vor Angular geladen wird):

var wrappedResult = angular.element(result);

Wenn Sie aus der elementVerknüpfungsfunktion einer Direktive auswählen möchten, müssen Sie auf die DOM-Referenz anstelle der jqLite-Referenz zugreifen - element[0]anstelle von element:

link: function (scope, element, attrs) {

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

Alternativ können Sie die document.querySelectorFunktion verwenden (benötigen Sie den Punkt hier, wenn Sie nach Klasse auswählen):

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

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

Sie müssen keine hinzufügen .in getElementsByClassName, das heißt

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

Bei der Verwendung angular.elementmüssen Sie jedoch JQuery-Stil-Selektoren verwenden:

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

sollte den Trick machen.

In dieser Dokumentation heißt es außerdem: "Wenn jQuery verfügbar ist, ist angle.element ein Alias ​​für die jQuery-Funktion. Wenn jQuery nicht verfügbar ist, delegiert angle.element an Angulars integrierte Teilmenge von jQuery, die als" jQuery lite "oder" jqLite "bezeichnet wird. ""

Die Antwort von @ tasseKATT ist großartig, aber wenn Sie keine Direktive erstellen möchten, warum nicht $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

Wenn Sie die Schaltfläche nur anhand ihres Klassennamens und nur mit jQLite suchen möchten, können Sie Folgendes tun:

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

Hoffe das hilft. :) :)