Cómo obtener elementos por nombre de clase o id

Estoy tratando de encontrar el elemento en html por angularjs.

Aquí está el 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/>

Estoy tratando de obtener el elemento del botón por nombre de clase de varios archivos, luego intenté

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

Pero no funciona, e intenté element.findpero solo funciona para la etiqueta.

¿Hay alguna función que pueda obtener el elemento por id o classname en angularjs?

getElementsByClassNamees una función en el documento DOM. No es una función jQuery ni jqLite.

No agregue el punto antes del nombre de la clase cuando lo use:

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

Envuélvalo en jqLite (o jQuery si jQuery se carga antes de Angular):

var wrappedResult = angular.element(result);

Si desea seleccionar desde la elementfunción de enlace de una directiva, debe acceder a la referencia DOM en lugar de la referencia jqLite, en element[0]lugar de element:

link: function (scope, element, attrs) {

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

Alternativamente, puede usar la document.querySelectorfunción (necesita el período aquí si selecciona por clase):

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

Demostración: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

Usted no tiene que agregar una .en getElementsByClassName, es decir,

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

Sin embargo, cuando se usa angular.element, debe usar selectores de estilo jquery:

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

debería hacer el truco.

Además, de esta documentación "Si jQuery está disponible, angular.element es un alias para la función jQuery. Si jQuery no está disponible, angular.element delega en el subconjunto incorporado de AngQ de jQuery, llamado" jQuery lite "o" jqLite. ""

La respuesta de @ tasseKATT es excelente, pero si no desea hacer una directiva, ¿por qué no usarla $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 desea encontrar el botón solo por su nombre de clase y usar solo jQLite, puede hacer lo siguiente:

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

Espero que esto ayude. :)