Eu estou tentando encontrar o elemento em html por angularjs.
Aqui está o html:
Eu estou tentando obter o elemento de botão por nome de class multi-arquivos, então eu tentei
var multibutton = angular.element(element.getElementsByClassName(".multi-files"));
Mas isso não funciona, e tentou element.find
mas só funciona para tag.
Existe alguma function que pode obter o elemento por id ou classname em angularjs?
getElementsByClassName
é uma function no documento DOM. Não é nem uma function jQuery nem uma function jqLite.
Não adicione o período antes do nome da class 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ê quiser selecionar o element
na function de link de uma diretiva, você precisa acessar a referência DOM ao invés do jqLite reference – element[0]
invés de element
:
link: function (scope, element, attrs) { var elementResult = element[0].getElementsByClassName('multi-files'); }
Alternativamente, você pode usar a function document.querySelector
(precisa do período aqui se selecionar por class):
var queryResult = element[0].querySelector('.multi-files'); var wrappedQueryResult = angular.element(queryResult);
Demonstração: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview
Você não precisa adicionar um .
em getElementsByClassName
, ou seja
var multibutton = angular.element(element.getElementsByClassName("multi-files"));
Ou apenas
angular.element('multi-files');
deve fazer o truque.
Além disso, a partir desta documentação “Se jQuery estiver disponível, angular.element é um alias para a function jQuery. Se jQuery não estiver disponível, o angular.element delega para o subconjunto de jQuery embutido do Angular, chamado” jQuery lite “ou” jqLite. “”
A resposta do @tasseKATT é ótima, mas se você não quiser fazer uma diretiva, por que não usar o $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
Se você quiser encontrar o botão apenas pelo nome da class e usar somente o jQLite, você pode fazer como abaixo:
var myListButton = $document.find('button').filter(function() { return angular.element(this).hasClass('multi-files'); });
Espero que isto ajude. 🙂