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>

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

para

$element.find('a2b')

Alguma ideia? outras idéias?

obrigado

Lior

angularjs angularjs-directive jqlite

— Lior
fonte

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

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

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

Se elem for um objeto jqlite, seriaangular.element(elem[0].querySelector('.classname'));

— cleversprocket

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

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

— ancajico
fonte

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

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