E eu sei que, especialmente nos \u00faltimos anos, muitos trouxeram componentes como React<\/a><\/strong> e Vue<\/a><\/strong>.<\/p>\n Em um desses casos, tenho feito alguns trabalhos com Angular<\/a><\/strong>. E se voc\u00ea est\u00e1 acostumado com ES6, JavaScript vanilla ou usando jQuery, ent\u00e3o acionar eventos Angular com jQuery pode parecer um pouco estranho no come\u00e7o.<\/p>\n Mas uma vez que voc\u00ea entende a marca\u00e7\u00e3o e como o Angular lida com seus eventos, n\u00e3o \u00e9 t\u00e3o ruim.<\/p>\n Angular funciona um pouco diferente do jQuery em como ele interage com o DOM sempre que um evento acontece.<\/p>\n Por exemplo, digamos que usando jQuery (ou mesmo JavaScript vanilla), temos uma p\u00e1gina e dentro dessa p\u00e1gina h\u00e1 um conjunto de marca\u00e7\u00e3o que pode incluir uma variedade de elementos. Estes podem ser:<\/p>\n Com jQuery, estamos acostumados a fazer algo assim:<\/p>\n Por causa de alguns dos recursos mais recentes do jQuery, podemos definir eventos personalizados e, em seguida, configurar ouvintes e trat\u00e1-los adequadamente, mas o comportamento geral ainda \u00e9 o mesmo.<\/p>\n Angular funciona um pouco diferente, no entanto.<\/p>\n Para mant\u00ea-lo direto (porque lembre-se, estou apenas tentando percorrer o processo pr\u00e1tico de acionar eventos Angular com jQuery), Angular tem marca\u00e7\u00e3o muito parecida com qualquer documento HTML padr\u00e3o com uma exce\u00e7\u00e3o.<\/p>\n Ou seja, qualquer marca\u00e7\u00e3o baseada em Angular \u00e9 orientada por atributos personalizados que s\u00e3o prefixados com ng.<\/strong> Eles dizem ao Angular para ouvir certos eventos quando eles acontecerem e, quando acontecerem, para agir.<\/p>\n Por exemplo, se houver um atributo em um elemento parecido com este<\/a><\/strong> :<\/p>\n Isso significa que sempre que o\u00a0 evento de altera\u00e7\u00e3o<\/strong> \u00e9 acionado, o Angular precisa acionar o manipulador apropriado e fazer o que for necess\u00e1rio para garantir que os dados sejam tratados adequadamente.<\/p>\n Mas \u00e9 a\u00ed que est\u00e1 a pergunta original: como podemos acionar eventos Angular com jQuery?<\/p>\n Antes de entrar em como fazer isso, quero criar um c\u00f3digo<\/a><\/strong> de exemplo baseado em Angular para que estejamos na mesma p\u00e1gina em rela\u00e7\u00e3o ao que estou falando:<\/p>\n Em suma, este \u00e9 um elemento select com v\u00e1rias op\u00e7\u00f5es. O objetivo \u00e9 duplo:<\/p>\n Simples o suficiente, certo? Claro, mas h\u00e1 algumas coisas dignas de nota e vou cobri-las na pr\u00f3xima se\u00e7\u00e3o.<\/p>\n Agora, digamos que vamos fazer algo com os\u00a0 elementos select<\/strong>, mas n\u00e3o vamos usar o Angular. Em vez disso, usaremos jQuery.<\/p>\n Mas, devido \u00e0 maneira como a solu\u00e7\u00e3o foi constru\u00edda, o Angular espera que um\u00a0 evento de altera\u00e7\u00e3o<\/strong> seja acionado no DOM para que o framework possa fazer o seu trabalho. Mas jQuery funciona de forma diferente, certo? Em vez disso, ele pega o evento, usa o assinante que configuramos e o manipula.<\/p>\n \u00c9 aqui que entra o nosso trabalho com o acionamento de eventos Angular com jQuery. Para ser claro, n\u00e3o \u00e9 t\u00e3o simples quanto chamar c\u00f3digo via jQuery assim<\/a><\/strong> :<\/p>\n Em vez disso, podemos definir o valor com jQuery, mas precisamos usar Angular para acionar o manipulador de eventos adequado. Ainda \u00e9 o\u00a0 evento de mudan\u00e7a<\/strong>, mas como fazemos isso \u00e9 diferente.<\/p>\n No c\u00f3digo a seguir<\/a><\/strong>, voc\u00ea ver\u00e1 onde estou alterando o elemento select para definir sua segunda op\u00e7\u00e3o como a op\u00e7\u00e3o selecionada e, em seguida, instruir\u00e1 o Angular a fazer sua a\u00e7\u00e3o acionando o evento change<\/strong> ao qual o elemento est\u00e1 vinculado.<\/p>\n Como voc\u00ea pode ver, n\u00e3o h\u00e1 muita diferen\u00e7a; no entanto, em vez de chamar\u00a0 o trigger<\/a> no elemento via jQuery, usamos a API fornecida pelo Angular. E isso vai cuidar disso.<\/p>\n N\u00e3o sou especialista em Angular (nem afirmei ser), mas quando se trata de trabalhar com uma solu\u00e7\u00e3o de terceiros personalizada fortemente modificada e as ferramentas que tenho \u00e0 minha disposi\u00e7\u00e3o, al\u00e9m das restri\u00e7\u00f5es de tempo e or\u00e7amento, \u00e9 \u00fatil saber como lidar com essas coisas.<\/p>\n Ent\u00e3o talvez isso seja de ajuda para voc\u00ea em um projeto futuro.<\/p>\n![\"Acionando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"Acionando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"Acionando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nAcionando eventos angulares com 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>\nUm pouco de configura\u00e7\u00e3o<\/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
Agora para 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 judiciosamente tais t\u00e9cnicas<\/h2>\n