Acionando eventos angulares com jQuery

Uma das coisas que eu gosto de trabalhar com o WordPress é a capacidade de trazer bibliotecas e ferramentas de terceiros para trabalhar.

Isso não significa que eles não vêm sem sua curva de aprendizado (todos eles vêm, certo?), mas muitas vezes é divertido – embora frustrante, às vezes – incorporar e manipular o que você está fazendo.

No que diz respeito às tecnologias de terceiros, vi pessoas trazendo coisas como o pacote Laravel Illuminate com o WordPress.

E eu sei que, especialmente nos últimos anos, muitos trouxeram componentes como React e Vue.

Em um desses casos, tenho feito alguns trabalhos com Angular. E se você está acostumado com ES6, JavaScript vanilla ou usando jQuery, então acionar eventos Angular com jQuery pode parecer um pouco estranho no começo.

Mas uma vez que você entende a marcação e como o Angular lida com seus eventos, não é tão ruim.

Acionando eventos angulares com jQuery

Angular funciona um pouco diferente do jQuery em como ele interage com o DOM sempre que um evento acontece.

Por exemplo, digamos que usando jQuery (ou mesmo JavaScript vanilla), temos uma página e dentro dessa página há um conjunto de marcação que pode incluir uma variedade de elementos. Estes podem ser:

• títulos,
• parágrafos,
• rótulos,
• selecionar elementos,
• e assim por diante.

Com jQuery, estamos acostumados a fazer algo assim:

1. encontre o elemento no qual queremos operar via ID, nome de classe ou algum outro atributo,
2. ouvir um evento,
3. responder adequadamente.

Por causa de alguns dos recursos mais recentes do jQuery, podemos definir eventos personalizados e, em seguida, configurar ouvintes e tratá-los adequadamente, mas o comportamento geral ainda é o mesmo.

Angular funciona um pouco diferente, no entanto.

Para mantê-lo direto (porque lembre-se, estou apenas tentando percorrer o processo prático de acionar eventos Angular com jQuery), Angular tem marcação muito parecida com qualquer documento HTML padrão com uma exceção.

Ou seja, qualquer marcação baseada em Angular é orientada por atributos personalizados que são prefixados com ng. Eles dizem ao Angular para ouvir certos eventos quando eles acontecerem e, quando acontecerem, para agir.

Por exemplo, se houver um atributo em um elemento parecido com este :

Isso significa que sempre que o  evento de alteração é acionado, o Angular precisa acionar o manipulador apropriado e fazer o que for necessário para garantir que os dados sejam tratados adequadamente.

Mas é aí que está a pergunta original: como podemos acionar eventos Angular com jQuery?

Um pouco de configuração

Antes de entrar em como fazer isso, quero criar um código de exemplo baseado em Angular para que estejamos na mesma página em relação ao que estou falando:

Em suma, este é um elemento select com várias opções. O objetivo é duplo:

1. alterar programaticamente o valor usando jQuery,
2. envie as informações usando funções nativas do Angular.

Simples o suficiente, certo? Claro, mas há algumas coisas dignas de nota e vou cobri-las na próxima seção.

Agora para jQuery

Agora, digamos que vamos fazer algo com os  elementos select, mas não vamos usar o Angular. Em vez disso, usaremos jQuery.

Mas, devido à maneira como a solução foi construída, o Angular espera que um  evento de alteração 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.

É aqui que entra o nosso trabalho com o acionamento de eventos Angular com jQuery. Para ser claro, não é tão simples quanto chamar código via jQuery assim :

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

Em vez disso, podemos definir o valor com jQuery, mas precisamos usar Angular para acionar o manipulador de eventos adequado. Ainda é o  evento de mudança, mas como fazemos isso é diferente.

No código a seguir, você verá onde estou alterando o elemento select para definir sua segunda opção como a opção selecionada e, em seguida, instruirá o Angular a fazer sua ação acionando o evento change ao qual o elemento está vinculado.

$('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 você pode ver, não há muita diferença; no entanto, em vez de chamar  o trigger no elemento via jQuery, usamos a API fornecida pelo Angular. E isso vai cuidar disso.

Usando judiciosamente tais técnicas

Não sou especialista em Angular (nem afirmei ser), mas quando se trata de trabalhar com uma solução de terceiros personalizada fortemente modificada e as ferramentas que tenho à minha disposição, além das restrições de tempo e orçamento, é útil saber como lidar com essas coisas.

Então talvez isso seja de ajuda para você em um projeto futuro.