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?
Respostas:
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:
Envolva-o no jqLite (ou jQuery se o jQuery for carregado antes do Angular):
Se você deseja selecionar a
element
função de link de uma diretiva, precisa acessar a referência DOM em vez da referência jqLite - emelement[0]
vez deelement
:Como alternativa, você pode usar a
document.querySelector
função (precisa do período aqui se selecionar por classe):Demo: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview
fonte
Você não precisa adicionar um
.
ingetElementsByClassName
, ou seja,No entanto, ao usar
angular.element
, você precisa usar seletores de estilo jquery: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. ""
fonte
A resposta do @ tasseKATT é ótima, mas se você não deseja fazer uma diretiva, por que não usar
$document
?PLUNKR
fonte
angular.element('#Your element id')
faz o mesmo trabalho.Se você deseja encontrar o botão apenas pelo nome da classe e usando apenas o jQLite, pode fazer o seguinte:
Espero que isto ajude. :)
fonte