Activación de eventos angulares con jQuery

Una de las cosas que disfruto de trabajar con WordPress es la capacidad de incorporar bibliotecas y herramientas de terceros con las que trabajar.

Esto no significa que no vengan sin su curva de aprendizaje (todos lo hacen, ¿verdad?), pero a menudo es divertido, aunque a veces frustrante, incorporar y luego manipular lo que estás haciendo.

En cuanto a las tecnologías de terceros, he visto a personas traer cosas como el paquete Laravel Illuminate con WordPress.

Y sé que, especialmente en los últimos años, muchos han incorporado componentes como React y Vue.

En uno de esos casos, he estado trabajando con Angular. Y si está acostumbrado a ES6, JavaScript estándar o jQuery, la activación de eventos Angular con jQuery puede parecer un poco extraño al principio.

Pero una vez que comprende el marcado y cómo Angular maneja sus eventos, no es tan malo.

Activación de eventos angulares con jQuery

Angular funciona un poco diferente a jQuery en la forma en que interactúa con el DOM cada vez que ocurre un evento.

Por ejemplo, digamos que usando jQuery (o incluso JavaScript estándar), tenemos una página y luego dentro de esa página hay un conjunto de marcado que puede incluir una variedad de elementos. Estos pueden ser:

• encabezados,
• párrafos,
• etiquetas,
• seleccionar elementos,
• y así.

Con jQuery, estamos acostumbrados a hacer algo como esto:

1. encontrar el elemento en el que queremos operar ya sea a través de ID, nombre de clase o algún otro atributo,
2. escuchar un evento,
3. responda apropiadamente.

Debido a algunas de las características más nuevas de jQuery, podemos definir eventos personalizados y luego configurar oyentes y manejarlos de manera adecuada, pero el comportamiento general sigue siendo el mismo.

Sin embargo, Angular funciona un poco diferente.

Para mantenerlo sencillo (porque recuerde, solo estoy tratando de recorrer el proceso práctico de desencadenar eventos de Angular con jQuery), Angular tiene marcado como cualquier documento HTML estándar con una excepción.

Es decir, cualquier marcado basado en Angular está impulsado por atributos personalizados que tienen el prefijo ng. Estos le dicen a Angular que escuche ciertos eventos cuando sucedan y, cuando lo hagan, que tome medidas.

Por ejemplo, si hay un atributo en un elemento que se parece a esto :

Entonces significa que cada vez que se activa el  evento de cambio, Angular debe activar el controlador apropiado y hacer lo que sea necesario para asegurarse de que los datos se manejen correctamente.

Pero aquí es donde radica la pregunta original: ¿Cómo podemos desencadenar eventos Angular con jQuery?

Un poco de configuración

Antes de entrar en cómo hacer esto, quiero crear un código de muestra basado en Angular para que estemos en la misma página con respecto a lo que estoy hablando:

En definitiva, se trata de un elemento selecto con una serie de opciones. El objetivo es doble:

1. cambiar el valor mediante programación usando jQuery,
2. enviar la información usando funciones nativas de Angular.

Bastante sencillo, ¿verdad? Claro, pero hay algunas cosas que vale la pena señalar y las cubriré en la siguiente sección.

Ahora a jQuery

Ahora, digamos que vamos a hacer algo con los  elementos seleccionados pero no vamos a usar Angular. En su lugar, vamos a utilizar jQuery.

Pero debido a la forma en que se construyó la solución, Angular espera que se active un  evento de cambio en el DOM para que el marco pueda hacer su trabajo. Pero jQuery funciona de manera diferente, ¿verdad? En cambio, toma el evento, usa el suscriptor que hemos configurado y luego lo maneja.

Aquí es donde entra en juego nuestro trabajo con la activación de eventos Angular con jQuery. Para ser claros, no es tan simple como llamar al código a través de jQuery de esta manera :

$('select['ng-model="item.payment_method"]').trigger('change');

En cambio, podemos establecer el valor con jQuery pero luego necesitamos usar Angular para activar el controlador de eventos adecuado. Sigue siendo el  evento de cambio, pero la forma en que lo hacemos es diferente.

En el siguiente código, verá dónde estoy cambiando el elemento de selección para establecer su segunda opción como la opción seleccionada y luego instruir a Angular para que haga lo suyo activando el evento de cambio al que está vinculado el elemento.

$('select[ng-model="schedule.payment_method"]').each(function() {

  // For the purposes of this example, we're going to select the first option.
  $(this)
    .children('option:eq(1)')
    .attr('selected', 'selected');

  // Make sure the select element reflects the change (as setting the option doesn't always do this properly).
  $(this).val($(this).children('option:selected').attr('value'));

  // Now use the Angular API's triggerHandler function to call the change.
  angular.element($(this)).triggerHandler('change');
});

Como puede ver, no hay mucho que sea diferente; sin embargo, en lugar de  activar el desencadenador en el elemento a través de jQuery, usamos la API proporcionada por Angular. Y eso se encargará de eso.

Usando juiciosamente tales técnicas

No soy un experto en Angular (ni pretendo serlo), pero cuando se trata de trabajar con una solución de terceros personalizada muy modificada y las herramientas que tengo a mi disposición junto con las limitaciones de tiempo y presupuesto, es útil saber manejar estas cosas.

Así que quizás esto te sea de ayuda en un proyecto futuro.