Eu estou tentando remover o jquery do meu aplicativo Angular.js para torná-lo mais leve e colocar jqLite do Angular em vez disso. Mas o aplicativo faz uso pesado de find (‘# id’) e find (‘.classname’), que não são suportados pelo jqLite, apenas ‘nomes de tag’ (conforme a documentação)
perguntou o que você acha que seria a melhor abordagem para mudar isso. Uma abordagem que pensei é criar tags HTML personalizadas. por exemplo: alterar
Add to bag
para
Add to bag
e
$element.find('#add-to-bag')
para
$element.find('a2b')
Alguma ideia? outras ideias?
obrigado
Lior
Essencialmente, e como 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ê quiser fazer isso com seus controladores, talvez queira 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
Se elem.find() não estiver funcionando para você, verifique se você está incluindo o script JQuery antes do script angular ….
O angualr usa a versão mais leve do jquery, chamada jqlite, o que significa que ele não possui todos os resources do jQuery. Aqui está uma referência em documentos angularjs sobre o que você pode usar do jquery. Documento do elemento angular
No seu caso, você precisa encontrar um div com o ID ou o nome da class. para o nome da turma 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 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