Como obter elemento por nome de classe ou ID

125

Estou tentando encontrar o elemento em html por angularjs.

Aqui está o 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/>

Estou tentando obter o elemento button por vários arquivos de nome de classe e tentei

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

Mas isso não funciona, e tentei element.find mas só funciona para tags.

Existe alguma função que possa obter elemento por id ou nome de classe em angularjs?

Justin
fonte
Talvez isso ajude: stackoverflow.com/questions/20801843/…
Wim Deblauwe
Você nem precisa criar uma diretiva. Você pode simplesmente adicionar um manipulador como o ng-click. Na pior das hipóteses, se você realmente deseja obter o elemento, sempre pode usar a sintaxe do jQuery.
Lucas Holt

Respostas:

187

getElementsByClassNameé uma função no documento DOM. Não é uma função jQuery nem jqLite.

Não adicione o período antes do nome da classe ao usá-lo:

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

Envolva-o no jqLite (ou jQuery se o jQuery for carregado antes do Angular):

var wrappedResult = angular.element(result);

Se você deseja selecionar a elementfunção de link de uma diretiva, precisa acessar a referência DOM em vez da referência jqLite - em element[0]vez de element:

link: function (scope, element, attrs) {

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

Como alternativa, você pode usar a document.querySelectorfunção (precisa do período aqui se selecionar por classe):

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

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

tasseKATT
fonte
1
Pode ser interessante notar que, dentro da função de link, element.childElementCount pode ser 0 porque angular ainda não teve a chance de criar os elementos, portanto, você deve estar preparado para lidar com nenhum resultado para o elemento [0] .getElement .. .
Dylanthepiguy
27

Você não precisa adicionar um .in getElementsByClassName, ou seja,

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

No entanto, ao usar angular.element, você precisa usar seletores de estilo jquery:

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

deve fazer o truque.

Além disso, nesta documentação "Se o jQuery estiver disponível, angular.element é um alias para a função jQuery. Se o jQuery não estiver disponível, o angular.element delega para o subconjunto interno do jQuery do Angular, chamado" jQuery lite "ou" jqLite. ""

Ashesh
fonte
oi, obrigado pela resposta, eu tentei isso, mas erro diz função indefinida
Justin
Pode ou não funcionar, sim. Por favor, verifique minha resposta agora (faça uma edição) e provavelmente você saberá o que fazer.
Ashesh
Se a função não estiver definida, você provavelmente não carregou o jquery. O jqlite (que é usado se você não carregou o jquery como o @Ashesh mencionado) não possui todas as funções que o jquery possui, e o getElementsByClassName é uma delas.
haimlit
5
angular.element ('multi-arquivos'); não vai funcionar. Você precisa do período.
Philippe Gioseffi
var multibutton = angular.element (document.getElementsByClassName ("multi-arquivos"));
Salman Lone
20

A resposta do @ tasseKATT é ótima, mas se você não deseja fazer uma diretiva, por que não usar $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

Ari
fonte
2
angular.element('#Your element id')faz o mesmo trabalho.
tagarela
3
Está dando esse erro no angular 1.5.8. "A procura de elementos através de seletores não é suportada pelo jqLite"
SP Singh
-4

Se você deseja encontrar o botão apenas pelo nome da classe e usando apenas o jQLite, pode fazer o seguinte:

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

Espero que isto ajude. :)

Debayan Das
fonte
1
Isso não está usando angular e jquery, também, declaração incorreta; você PODE realmente usar o jquery para substituir o jqlite. Esta é a maneira correta de fazer isso em um ambiente angular, sem ir para o elemento javascript vanilla ($ document [0]).
Dennis Bartlett #