Como selecionar um elemento por nome de classe usando jqLite?

110

Estou tentando remover o jquery do meu aplicativo Angular.js para torná-lo mais leve e colocar o jqLite do Angular no lugar. Mas o aplicativo faz uso intenso de find ('# id') e find ('.classname'), que não são suportados pelo jqLite, apenas 'nomes de tag' (conforme documentação)

gostaria de saber qual você acha que seria a melhor abordagem para mudá-lo. Uma abordagem em que pensei é criar tags HTML personalizadas. por exemplo: mudança
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

para 

<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>

e 

$element.find('#add-to-bag')

para

$element.find('a2b')

Alguma ideia? outras idéias?

obrigado

Lior

angularjs angularjs-directive jqlite Lior
fonte
4
Os IDs devem ser exclusivos, portanto, não faz sentido encontrar um elemento que seja filho de outro elemento por ID. Basta selecionar o elemento por Id. Se o seu ID não for exclusivo, mude seu ID para uma classe. Além disso, você pode usar DomElement.querySelector(".myclassname")para selecionar um único elemento descendente usando um seletor css, ou todas as correspondências adicionando All a ele: DomElement.querySelectorAll(".myclassname")Isso obviamente não funciona no IE <9.
Kevin B
Se você definir um a2belemento, deve ter definido uma diretiva. Você pode fazer o que precisa ser feito na função de link da diretiva e, portanto, evitar a necessidade de chamar find () inteiramente? Da mesma forma com suas classes - você pode definir diretivas e colocar a funcionalidade de que precisa nas funções de link (ou compilar) das diretivas?
Mark Rajcok
2
O jqLite de @KevinB Angular é compatível com 'apenas nomes de tags'
Lior
@MarkRajcok Não defini uma diretiva. parece funcionar no IE e no Chrome. mas mesmo que eu definisse uma diretiva, por que isso ajudaria? Eu ainda precisaria obter um elemento DOM.
Lior
Por que find ('span.btn') ou similar não funciona para você?
Fabi

Respostas:

202

Essencialmente, e conforme observado por @ kevin-b:

// find('#id')
angular.element(document.querySelector('#id'))

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

Nota: Se você está procurando fazer isso de seus controladores, pode dar uma olhada na seção "Usando controladores corretamente" no guia do desenvolvedor e refatorar sua lógica de apresentação em diretivas apropriadas (como <a2b ...>) .

psema4
fonte
3
Obrigado! para adicionar da resposta de Ricardo Bin (lista de discussão do angular), $ document injectable também pode ser usado: jsfiddle.net/ricardohbin/fTQcs
Lior
Infelizmente, o URL referido não é mais válido ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ) e não parece haver qualquer substituição nessa seção.
Por Quested Aronsson
Não. Angular.element (document.querySelector ('# id')) é a alternativa para: $ ('# id'), não para: elementArray.find ('# id')
Broda Noel de
Certo - mas, conforme descobrimos, à medida que construímos novas partes de nosso aplicativo no angular, às vezes precisamos "colocar fita adesiva" nas partes mais antigas por um tempo até que possam ser atualizadas ou refeitas. Em nosso caso, precisávamos carregar alguns dados jquery / ajax antigos sem modificar a bagunça existente, então fizemos o seguinte- $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (data);});
Kenn
42
Se elem for um objeto jqlite, seriaangular.element(elem[0].querySelector('.classname'));
cleversprocket
2

angualr usa a versão mais leve do jquery, chamada de jqlite, o que significa que não possui todos os recursos do jQuery. aqui está uma referência na documentação do angularjs sobre o que você pode usar no jquery. Angular Element docs

No seu caso, você precisa encontrar um div com ID ou nome de classe. para o nome da classe você pode usar

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

ou você pode usar uma maneira muito mais simples pelo seletor de consulta

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

não é tão flexível quanto jQuery, mas o que

Hannad Rehman
fonte
1

Se elem.find()não estiver funcionando para você, verifique se está incluindo o script JQuery antes do script angular ....

ancajico
fonte
3
Embora o OP tenha perguntado especificamente sobre o jqLite, para aqueles que usam jQuery e esperam que find () funcione com classes e IDs também, esta resposta pode certamente ajudar.
Matt B
2
Para esclarecer: "Se jQuery estiver disponível, angular.element é um apelido para a função jQuery. Se jQuery não estiver disponível, angular.element delega para o subconjunto integrado de jQuery do Angular, chamado" jQuery lite "ou jqLite.". Citação de: docs.angularjs.org/api/ng/function/angular.element . jqLite contém find ().
Kmaczek