Y s\u00e9 que, especialmente en los \u00faltimos a\u00f1os, muchos han incorporado componentes como React<\/a><\/strong> y Vue<\/a><\/strong>.<\/p>\n En uno de esos casos, he estado trabajando con Angular<\/a><\/strong>. Y si est\u00e1 acostumbrado a ES6, JavaScript est\u00e1ndar o jQuery, la activaci\u00f3n de eventos Angular con jQuery puede parecer un poco extra\u00f1o al principio.<\/p>\n Pero una vez que comprende el marcado y c\u00f3mo Angular maneja sus eventos, no es tan malo.<\/p>\n Angular funciona un poco diferente a jQuery en la forma en que interact\u00faa con el DOM cada vez que ocurre un evento.<\/p>\n Por ejemplo, digamos que usando jQuery (o incluso JavaScript est\u00e1ndar), tenemos una p\u00e1gina y luego dentro de esa p\u00e1gina hay un conjunto de marcado que puede incluir una variedad de elementos. Estos pueden ser:<\/p>\n Con jQuery, estamos acostumbrados a hacer algo como esto:<\/p>\n Debido a algunas de las caracter\u00edsticas m\u00e1s nuevas de jQuery, podemos definir eventos personalizados y luego configurar oyentes y manejarlos de manera adecuada, pero el comportamiento general sigue siendo el mismo.<\/p>\n Sin embargo, Angular funciona un poco diferente.<\/p>\n Para mantenerlo sencillo (porque recuerde, solo estoy tratando de recorrer el proceso pr\u00e1ctico de desencadenar eventos de Angular con jQuery), Angular tiene marcado como cualquier documento HTML est\u00e1ndar con una excepci\u00f3n.<\/p>\n Es decir, cualquier marcado basado en Angular est\u00e1 impulsado por atributos personalizados que tienen el prefijo ng.<\/strong> Estos le dicen a Angular que escuche ciertos eventos cuando sucedan y, cuando lo hagan, que tome medidas.<\/p>\n Por ejemplo, si hay un atributo en un elemento que se parece a esto<\/a><\/strong> :<\/p>\n Entonces significa que cada vez que se activa el\u00a0 evento de cambio<\/strong>, Angular debe activar el controlador apropiado y hacer lo que sea necesario para asegurarse de que los datos se manejen correctamente.<\/p>\n Pero aqu\u00ed es donde radica la pregunta original: \u00bfC\u00f3mo podemos desencadenar eventos Angular con jQuery?<\/p>\n Antes de entrar en c\u00f3mo hacer esto, quiero crear un c\u00f3digo de muestra<\/a><\/strong> basado en Angular para que estemos en la misma p\u00e1gina con respecto a lo que estoy hablando:<\/p>\n En definitiva, se trata de un elemento selecto con una serie de opciones. El objetivo es doble:<\/p>\n Bastante sencillo, \u00bfverdad? Claro, pero hay algunas cosas que vale la pena se\u00f1alar y las cubrir\u00e9 en la siguiente secci\u00f3n.<\/p>\n Ahora, digamos que vamos a hacer algo con los\u00a0 elementos seleccionados<\/strong> pero no vamos a usar Angular. En su lugar, vamos a utilizar jQuery.<\/p>\n Pero debido a la forma en que se construy\u00f3 la soluci\u00f3n, Angular espera que se active un\u00a0 evento de cambio<\/strong> en el DOM para que el marco pueda hacer su trabajo. Pero jQuery funciona de manera diferente, \u00bfverdad? En cambio, toma el evento, usa el suscriptor que hemos configurado y luego lo maneja.<\/p>\n Aqu\u00ed es donde entra en juego nuestro trabajo con la activaci\u00f3n de eventos Angular con jQuery. Para ser claros, no es tan simple como llamar al c\u00f3digo a trav\u00e9s de jQuery de esta manera<\/a><\/strong> :<\/p>\n En cambio, podemos establecer el valor con jQuery pero luego necesitamos usar Angular para activar el controlador de eventos adecuado. Sigue siendo el\u00a0 evento de cambio<\/strong>, pero la forma en que lo hacemos es diferente.<\/p>\n En el siguiente c\u00f3digo<\/a><\/strong>, ver\u00e1 d\u00f3nde estoy cambiando el elemento de selecci\u00f3n para establecer su segunda opci\u00f3n como la opci\u00f3n seleccionada y luego instruir a Angular para que haga lo suyo activando el evento de cambio<\/strong> al que est\u00e1 vinculado el elemento.<\/p>\n Como puede ver, no hay mucho que sea diferente; sin embargo, en lugar de\u00a0 activar el desencadenador<\/a> en el elemento a trav\u00e9s de jQuery, usamos la API proporcionada por Angular. Y eso se encargar\u00e1 de eso.<\/p>\n No soy un experto en Angular (ni pretendo serlo), pero cuando se trata de trabajar con una soluci\u00f3n de terceros personalizada muy modificada y las herramientas que tengo a mi disposici\u00f3n junto con las limitaciones de tiempo y presupuesto, es \u00fatil saber manejar estas cosas.<\/p>\n As\u00ed que quiz\u00e1s esto te sea de ayuda en un proyecto futuro.<\/p>\n![\"Activaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"Activaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"Activaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nActivaci\u00f3n de eventos angulares con jQuery<\/h2>\n
\n
\n
<select class=\"form-control ng-pristine ng-untouched ng-valid ng-empty\" ng-model=\"item.payment_method\" ng-change=\"updatePaymentMethod(item)\" ng-options=\"method.display_name for method in paymentMethods track by method.id\">\n <!-- more to come -->\n<\/select><\/code><\/pre>\nUn poco de configuraci\u00f3n<\/h3>\n
<select class=\"form-control ng-pristine ng-untouched ng-valid ng-empty\" ng-model=\"item.payment_method\" ng-change=\"updatePaymentMethod(item)\" ng-options=\"method.display_name for method in paymentMethods track by method.id\">\n <option value=\"?\"><\/option>\n <option value=\"1042\" selected=\"selected\">Card 1001 (01\/18)<\/option>\n<\/select><\/code><\/pre>\n\n
Ahora a jQuery<\/h3>\n
$('select['ng-model=\"item.payment_method\"]').trigger('change');<\/code><\/pre>\n$('select[ng-model=\"schedule.payment_method\"]').each(function() {\n\n \/\/ For the purposes of this example, we're going to select the first option.\n $(this)\n .children('option:eq(1)')\n .attr('selected', 'selected');\n\n \/\/ Make sure the select element reflects the change (as setting the option doesn't always do this properly).\n $(this).val($(this).children('option:selected').attr('value'));\n\n \/\/ Now use the Angular API's triggerHandler function to call the change.\n angular.element($(this)).triggerHandler('change');\n});<\/code><\/pre>\nUsando juiciosamente tales t\u00e9cnicas<\/h2>\n