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

110

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

se preguntó cuál crees que sería el mejor enfoque para cambiarlo. Un enfoque en el que pensé es crear etiquetas HTML personalizadas. por ejemplo: cambiar
<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

angularjs angularjs-directive jqlite Lior
fuente
4
Los ID deben ser únicos, por lo tanto, no tiene sentido encontrar un elemento que sea hijo de otro elemento por ID. Simplemente seleccione el elemento por Id. Si sus identificaciones no son únicas, cambie su identificación a una clase. Además, puede usar DomElement.querySelector(".myclassname")para seleccionar un solo elemento descendiente usando un selector css, o todas las coincidencias agregando All: DomElement.querySelectorAll(".myclassname")eso, por supuesto, no funciona en IE <9.
Kevin B
Si define un a2belemento, debe haber definido una directiva. ¿Puede hacer lo que debe hacerse en la función de enlace de la directiva y, por lo tanto, evitar la necesidad de llamar a find () por completo? De manera similar con sus clases, ¿puede definir directivas y poner la funcionalidad que necesita en las funciones de enlace (o compilación) de las directivas?
Mark Rajcok
2
Se dice que jqLite de @KevinB Angular admite 'solo nombres de etiquetas'
Lior
@MarkRajcok No definí una directiva. parece funcionar en IE y Chrome. pero incluso si definiera una directiva, ¿por qué ayudaría? Todavía necesitaría conseguir un elemento DOM.
Lior
¿Cómo es que find ('span.btn') o similar no funciona para usted?
Fabi

Respuestas:

202

Esencialmente, y como lo señaló @ 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 está buscando hacer esto desde sus controladores, es posible que desee echar un vistazo a la sección "Usar los controladores correctamente" en la guía para desarrolladores y refactorizar su lógica de presentación en las directivas apropiadas (como <a2b ...>) .

psema4
fuente
3
¡Gracias! para agregar de la respuesta de Ricardo Bin (lista de correo de angular), $ document inyectable también podría usarse: jsfiddle.net/ricardohbin/fTQcs
Lior
Desafortunadamente, la URL referida ya no es válida ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ) y no parece haber ningún reemplazo en esa sección.
Per Quested Aronsson
No. angular.element (document.querySelector ('# id')) es la alternativa a: $ ('# id'), no para: elementArray.find ('# id')
Broda Noel
Correcto, pero como hemos descubierto a medida que construimos nuevas partes de nuestra aplicación en angular, a veces necesitamos "pegar con cinta adhesiva" las partes más antiguas durante un tiempo hasta que puedan actualizarse o modificarse. En nuestro caso, necesitábamos cargar algunos datos antiguos de jquery / ajax sin modificar el desorden existente, así que hicimos lo siguiente: $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (datos);});
Kenn
42
Si elem es un objeto jqlite, lo seríaangular.element(elem[0].querySelector('.classname'));
cleversprocket
2

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 los documentos de angularjs sobre lo que puede usar desde jquery. Documentos de Angular Element

En su caso, necesita encontrar un div con ID o nombre de clase. para el nombre de la clase que puede 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 puede usar una forma 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 lo que

hannad rehman
fuente
1

Si elem.find()no funciona para usted, verifique que esté incluyendo el script JQuery antes del script angular ...

ancajic
fuente
3
Aunque el OP preguntó específicamente sobre jqLite, para aquellos que usan jQuery y esperan que find () también funcione con clases e ID, esta respuesta ciertamente puede ayudar.
Matt B
2
Para aclarar: "Si jQuery está disponible, angular.element es un alias para la función jQuery. Si jQuery no está disponible, angular.element delega al subconjunto integrado de jQuery de Angular, llamado" jQuery lite "o jqLite.". Cita de: docs.angularjs.org/api/ng/function/angular.element . jqLite contiene find ().
Kmaczek