Come ottenere l'elemento per nome della classe o id

Question

Sto cercando di trovare l'elemento in html da angularjs.

Ecco il codice 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/> 

sto cercando di ottenere l'elemento tasto al nome di classe multi-file, poi ho provato

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

Ma non funziona, e ho cercato element.find ma funziona solo per tag.

C'è qualche funzione che può ottenere l'elemento da id o classname in angularjs?

Answer 1

getElementsByClassName è una funzione del documento DOM. Non è né una funzione jQuery né una jqLite.

Non aggiungere il periodo che precede il nome della classe quando lo si utilizza:

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

avvolgerla in jqLite (o jQuery se jQuery viene caricato prima angolare):

var wrappedResult = angular.element(result); 

Se si desidera per selezionare dal element nella funzione di collegamento di una direttiva è necessario accedere al riferimento DOM invece del riferimento jqLite - element[0] anziché element:

link: function (scope, element, attrs) { 

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

In alternativa è possibile utilizzare la funzione document.querySelector (necessario il periodo di qui se la selezione per classe):

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

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

Answer 2

Non è necessario aggiungere un . in getElementsByClassName, vale a dire

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

O semplicemente

angular.element('multi-files'); 

dovrebbe fare il trucco.

Inoltre, da this documentation "Se jQuery è disponibile, angular.element è un alias per la funzione jQuery. Se jQuery non è disponibile, i delegati angular.element al sottoinsieme built-in di angolare di jQuery, chiamato 'jQuery lite' o "jqLite""

Answer 3

Se si vuole trovare il pulsante solo dal suo nome della classe e utilizzando solo jQLite, si può fare come di seguito:

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

Spero che questo aiuti. :)

Answer 4

@ risposta di tasseKATT è grande, ma se si don' t voglio fare una direttiva, perché non usare $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