Angular Events mit jQuery auslösen

Eines der Dinge, die mir an der Arbeit mit WordPress gefallen, ist die Möglichkeit, Bibliotheken und Tools von Drittanbietern einzubinden, mit denen ich arbeiten kann.

Das bedeutet nicht, dass sie nicht ohne ihre Lernkurve kommen (das tun sie alle, oder?), aber es macht oft Spaß – wenn auch manchmal frustrierend – zu integrieren und dann zu manipulieren, was Sie tun.

Was Technologien von Drittanbietern angeht, habe ich gesehen, wie Leute Dinge wie das Laravel Illuminate-Paket mit WordPress eingebracht haben.

Und ich weiß, gerade in den letzten Jahren haben viele Komponenten wie React und Vue eingeführt.

In einem solchen Fall habe ich mit Angular gearbeitet. Und wenn Sie an ES6, Vanilla JavaScript oder die Verwendung von jQuery gewöhnt sind, kann das Auslösen von Angular-Ereignissen mit jQuery zunächst etwas seltsam erscheinen.

Aber sobald Sie das Markup verstehen und wissen, wie Angular mit seinen Ereignissen umgeht, ist es nicht so schlimm.

Angular Events mit jQuery auslösen

Angular funktioniert etwas anders als jQuery in der Art und Weise, wie es mit dem DOM interagiert, wenn ein Ereignis eintritt.

Nehmen wir zum Beispiel an, dass wir mit jQuery (oder sogar Vanilla JavaScript) eine Seite haben und dann innerhalb dieser Seite eine Reihe von Markups ist, die eine Vielzahl von Elementen enthalten können. Dies können sein:

• Überschriften,
• Absätze,
• Etiketten,
• Elemente auswählen,
• usw.

Mit jQuery sind wir es gewohnt, so etwas zu tun:

1. Finden Sie das Element, an dem wir arbeiten möchten, entweder über die ID, den Klassennamen oder ein anderes Attribut.
2. auf ein Ereignis hören,
3. Richtig reagieren.

Aufgrund einiger der neueren Funktionen von jQuery können wir benutzerdefinierte Ereignisse definieren und dann Listener einrichten und sie entsprechend behandeln, aber das allgemeine Verhalten ist immer noch dasselbe.

Angular funktioniert jedoch etwas anders.

Um es einfach zu halten (denn denken Sie daran, ich versuche nur, den praktischen Prozess des Auslösens von Angular-Ereignissen mit jQuery durchzugehen), hat Angular Markup ähnlich wie jedes Standard-HTML-Dokument mit einer Ausnahme.

Jedes Angular-basierte Markup wird nämlich von benutzerdefinierten Attributen gesteuert, denen ng vorangestellt ist. Diese weisen Angular an, auf bestimmte Ereignisse zu lauschen, wenn sie eintreten, und Maßnahmen zu ergreifen, wenn dies der Fall ist.

Wenn es beispielsweise ein Attribut für ein Element gibt, das so aussieht :

Dann bedeutet dies, dass Angular jedes Mal, wenn das Änderungsereignis ausgelöst wird, den entsprechenden Handler auslösen und alles tun muss, um sicherzustellen, dass die Daten ordnungsgemäß verarbeitet werden.

Aber hier liegt die ursprüngliche Frage: Wie können wir Angular-Events mit jQuery auslösen?

Eine kleine Aufstellung

Bevor ich darauf eingehe, wie das geht, möchte ich einen Beispielcode erstellen, der auf Angular basiert, damit wir in Bezug auf das, worüber ich spreche, auf derselben Seite sind:

Kurz gesagt, dies ist ein ausgewähltes Element mit einer Reihe von Optionen. Das Ziel ist zweierlei:

1. ändern Sie den Wert programmgesteuert mit jQuery,
2. Senden Sie die Informationen mit nativen Angular-Funktionen.

Einfach genug, oder? Sicher, aber es gibt ein paar Dinge, die es wert sind, beachtet zu werden, und ich werde diese im nächsten Abschnitt behandeln.

Jetzt zu jQuery

Nehmen wir nun an, dass wir etwas mit den ausgewählten Elementen machen werden, aber wir werden Angular nicht verwenden. Stattdessen werden wir jQuery verwenden.

Aufgrund der Art und Weise, wie die Lösung erstellt wurde, wartet Angular jedoch darauf, dass ein Änderungsereignis im DOM ausgelöst wird, damit das Framework seine Arbeit erledigen kann. Aber jQuery funktioniert anders, oder? Stattdessen nimmt es das Ereignis, verwendet den von uns eingerichteten Abonnenten und verarbeitet es dann.

Hier kommt unsere Arbeit mit dem Auslösen von Angular-Events mit jQuery ins Spiel. Um es klar zu sagen, es ist nicht so einfach wie das Aufrufen von Code über jQuery wie folgt :

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

Stattdessen können wir den Wert mit jQuery festlegen, aber dann müssen wir Angular verwenden, um den richtigen Event-Handler auszulösen. Es ist immer noch das Änderungsereignis, aber wie wir es tun, ist anders.

Im folgenden Code sehen Sie, wo ich das select-Element ändere, um seine zweite Option als ausgewählte Option festzulegen, und dann Angular anweise, seine Sache zu tun, indem es das Änderungsereignis auslöst, an das das Element gebunden ist.

$('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');
});

Wie Sie sehen können, gibt es nicht viel, was anders ist; Anstatt  den Trigger für das Element über jQuery aufzurufen, verwenden wir jedoch die von Angular bereitgestellte API. Und das wird sich darum kümmern.

Vernünftige Verwendung solcher Techniken

Ich bin kein Angular-Experte (und habe dies auch nicht behauptet), aber wenn es darum geht, mit einer stark modifizierten benutzerdefinierten Lösung eines Drittanbieters und den mir zur Verfügung stehenden Tools zusammen mit den Einschränkungen von Zeit und Budget zu arbeiten, ist es hilfreich zu wissen, wie man mit diesen Dingen umgeht.

Vielleicht hilft Ihnen das bei einem zukünftigen Projekt weiter.