jQuery y AngularJS: unir eventos a un DOM cambiante

En mi DOM en AngularJS, estoy usando una ng-include dentro de una directiva ng-repeat. Está cargando el HTML muy bien. De todos modos, un problema que tengo es que estoy usando JQuery (última versión) para enlazar algunos eventos de mouse y ratón sobre elementos en el DOM con la misma clase que los agregados al DOM por ng-repeat e include. Sin embargo, parece que JQuery no aplica los controladores de eventos a la nueva adición DOM.

En versiones anteriores, .live () parecía hacer lo que quería, pero se ha eliminado en la última versión. ¿Debería borrar los enlaces en los elementos y volver a crearlos cada vez que el DOM tenga elementos adicionales de la clase agregados?

Responda aquí:

Esta es una pregunta multifacética. En primer lugar, todos los eventos de código jQuery deben usar $ scope. $ Apply para ejecutar el código de angularjs como se esperaba. Ejemplo:

jQuery(selector).someEvent(function(){ $scope.$apply(function(){ // perform any model changes or method invocations here on angular app. }); }); 

En la última versión de jQuery, para tener eventos que se actualicen en función de los cambios DOM, desea 1. Obtener un selector para el elemento principal más cercano (ex):

 

En este caso, su selector principal sería “.myDiv”, y su selector de hijos sería .myDynamicDiv.

Por lo tanto, desea que jQuery tenga los eventos en el elemento padre del elemento, de modo que si los elementos secundarios cambian, seguirá funcionando:

 $('.myDiv').on("click", ".myDynamicDiv", function(e){ $(this).slideToggle(500); $scope.$apply(function(){ $scope.myAngularVariable = !$scope.myAngularVariable; }); }); 

Observe que $ scope. $ Apply () se utiliza para permitir que jQuery acceda a esas variables angulares.

¡Espero que esto ayude! cristiano

Descargo de responsabilidad: He estado aprendiendo anglosajona por lo que estas son básicamente conjeturas a medias.

En primer lugar, considere el uso de directivas angulares para el trabajo según lo establecido por Bertrand y Mark.

Segundo, asegúrate de que jquery se cargue antes que angular, mira aquí .

En tercer lugar, podría ser un problema vinculante (dynamic), ver aquí .

Por favor deje un comentario.

Christian Stewart ya ha respondido bien esta pregunta, pero solo quería agregar algo a su respuesta.

Uso el siguiente código y agrego la clase ” cssClickableIcon ” a mis botones, de modo que cuando el usuario haga clic en un botón (o en un control div ), se encoja un poco hacia adentro.

enter image description here

Es un pequeño cambio, pero tiene un efecto realmente agradable en una página web. Realmente siente que la página web es más interactiva que plana y que ha hecho clic en el control.

 // Make the buttons "bounce" when they're clicked on $('body').on("mousedown", ".cssClickableIcon", function (e) { $(this).css("transform", "scale(0.9)"); }); $('body').on("mouseup", ".cssClickableIcon", function (e) { $(this).css("transform", ""); }); 

Debido a que esto usa la función de jQuery’s on , funciona con botones u otros elementos DOM creados por un comando AngularJS ng-repeat .

Y, por supuesto, si está utilizando las clases CSS de botón propias de Bootstrap, puede agregar fácilmente este efecto a todos sus botones Bootstrap / Angular usando esto:

 $('body').on("mousedown", ".btn", function (e) { $(this).css("transform", "scale(0.9)"); }); $('body').on("mouseup", ".btn", function (e) { $(this).css("transform", ""); }); 

Me encanta este efecto, ¡y es tan simple de agregar!

Actualizar

Christian Stewart sugirió usar CSS en lugar de jQuery, y tiene toda la razón …

Entonces, puedes lograr el mismo efecto usando solo este simple CSS:

 .btn:active { transform: scale(0.9); }