Attivazione di eventi angolari con jQuery

Una delle cose che mi piace di lavorare con WordPress è la possibilità di inserire librerie e strumenti di terze parti con cui lavorare.

Questo non significa che non arrivino senza la loro curva di apprendimento (lo fanno tutti, giusto?), ma è spesso divertente, anche se a volte frustrante, incorporare e poi manipolare ciò che stai facendo.

Per quanto riguarda le tecnologie di terze parti, ho visto persone portare cose come il pacchetto Laravel Illuminate con WordPress.

E so che, soprattutto negli ultimi anni, molti hanno introdotto componenti come React e Vue.

In uno di questi casi, ho lavorato con Angular. E se sei abituato a ES6, JavaScript vanilla o usi jQuery, l’attivazione di eventi angolari con jQuery può sembrare un po’ strano all’inizio.

Ma una volta compreso il markup e il modo in cui Angular gestisce i suoi eventi, non è così male.

Attivazione di eventi angolari con jQuery

Angular funziona in modo leggermente diverso rispetto a jQuery nel modo in cui interagisce con il DOM ogni volta che si verifica un evento.

Ad esempio, diciamo che usando jQuery (o anche JavaScript vanilla), abbiamo una pagina e quindi all’interno di quella pagina c’è un insieme di markup che può includere una varietà di elementi. Questi possono essere:

• titoli,
• paragrafi,
• etichette,
• selezionare gli elementi,
• e così via.

Con jQuery, siamo abituati a fare qualcosa del genere:

1. trova l’elemento su cui vogliamo operare tramite ID, nome della classe o qualche altro attributo,
2. ascolta un evento,
3. rispondere in modo appropriato.

A causa di alcune delle nuove funzionalità di jQuery, siamo in grado di definire eventi personalizzati e quindi impostare listener e gestirli in modo appropriato, ma il comportamento generale è sempre lo stesso.

Angular funziona in modo leggermente diverso, però.

Per semplificare (perché ricorda, sto solo cercando di illustrare il processo pratico di attivazione di eventi angolari con jQuery), Angular ha un markup molto simile a qualsiasi documento HTML standard con un’eccezione.

Vale a dire, qualsiasi markup basato su Angular è guidato da attributi personalizzati che sono preceduti da ng. Questi dicono ad Angular di ascoltare determinati eventi quando accadono e, quando si verificano, di agire.

Ad esempio, se c’è un attributo su un elemento che assomiglia a questo :

Quindi significa che ogni volta che viene attivato l’  evento di modifica, Angular deve attivare il gestore appropriato e fare tutto il necessario per assicurarsi che i dati vengano gestiti correttamente.

Ma è qui che si trova la domanda originale: come possiamo attivare eventi angolari con jQuery?

Un po’ di configurazione

Prima di entrare in come farlo, voglio creare del codice di esempio basato su Angular, quindi siamo sulla stessa pagina per quanto riguarda ciò di cui sto parlando:

In breve, questo è un elemento selezionato con una serie di opzioni. L’obiettivo è raddoppiare:

1. modificare a livello di codice il valore usando jQuery,
2. inviare le informazioni utilizzando le funzioni angolari native.

Abbastanza semplice, giusto? Certo, ma ci sono alcune cose degne di nota e le tratterò nella prossima sezione.

Ora a jQuery

Ora, diciamo che faremo qualcosa con gli  elementi select ma non useremo Angular. Invece, useremo jQuery.

Ma a causa del modo in cui è stata creata la soluzione, Angular attende l’attivazione di un  evento di modifica sul DOM in modo che il framework possa fare il suo dovere. Ma jQuery funziona in modo diverso, giusto? Invece, prende l’evento, usa l’abbonato che abbiamo impostato e quindi lo gestisce.

È qui che entra in gioco il nostro lavoro con l’attivazione di eventi angolari con jQuery. Per essere chiari, non è semplice come chiamare il codice tramite jQuery in questo modo :

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

Invece, possiamo impostare il valore con jQuery ma poi dobbiamo usare Angular per attivare il corretto gestore di eventi. È ancora l’  evento del cambiamento, ma il modo in cui lo facciamo è diverso.

Nel codice seguente, vedrai dove sto modificando l’elemento select per impostare la sua seconda opzione come opzione selezionata e quindi istruire Angular a fare il suo lavoro attivando l’ evento di modifica a cui è associato l’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');
});

Come puoi vedere, non c’è molto di diverso; tuttavia, anziché chiamare trigger sull’elemento tramite jQuery, utilizziamo l’API fornita da Angular. E questo se ne occuperà.

Usando giudiziosamente tali tecniche

Non sono un esperto di Angular (né ho affermato di esserlo), ma quando si tratta di lavorare con una soluzione personalizzata di terze parti pesantemente modificata e gli strumenti che ho a mia disposizione insieme ai vincoli di tempo e budget, è utile sapere come gestire queste cose.

Quindi forse questo ti sarà di aiuto in un progetto futuro.