angularjs - example - ¿Cómo seleccionar un elemento por nombre de clase usando jqLite?

ngclass angular 5

Question

Intento eliminar jquery de mi aplicación Angular.js para hacerlo más ligero, y en su lugar, poner jqLite de Angular. Pero la aplicación hace un uso intensivo de find (''# id'') y find (''.classname''), que no son compatibles con jqLite, solo ''nombres de etiqueta'' (según la documentación)

se preguntó cuál sería el mejor enfoque para cambiarlo. Un enfoque en el que pensé es crear etiquetas HTML personalizadas. por ejemplo: cambio
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

a

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

y

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

a

$element.find(''a2b'')

¿Alguna idea? ¿otras ideas?

Gracias

Lior

Answer 1

Esencialmente, y según lo 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: Si desea hacer esto desde sus controladores, le recomendamos echar un vistazo a la sección "Uso correcto de los controladores" en la guía de desarrolladores y refactorizar su lógica de presentación en directivas apropiadas (como <a2b ...>) .

Answer 2

Si elem.find() no funciona para usted, verifique que esté incluyendo la secuencia de comandos JQuery antes de la secuencia de comandos angular ....

Answer 3

angualr usa la versión más ligera de jquery llamada jqlite, lo que significa que no tiene todas las características de jQuery. aquí hay una referencia en angularjs docs sobre lo que puedes usar de jquery. docs.angularjs.org/api/ng/function/angular.element

En su caso, necesita encontrar un div con ID o nombre de clase. para el nombre de clase que puedes 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));
}}

o puedes usar mucho más simple mediante el selector de consultas

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

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

no es tan flexible como jQuery, pero