Utlöser vinkelhändelser med jQuery

En av de saker som jag tycker om med att arbeta med WordPress är möjligheten att ta in tredjepartsbibliotek och verktyg att arbeta med.

Detta betyder inte att de inte kommer utan sin inlärningskurva (det gör de alla, eller hur?), men det är ofta kul – om än frustrerande ibland – att införliva och sedan manipulera det du gör.

När det gäller tredjepartsteknologier har jag sett människor ta in saker som Laravel Illuminate-paketet med WordPress.

Och jag vet, speciellt på senare år, har många tagit in komponenter som React och Vue.

I ett sådant fall har jag arbetat en del med Angular. Och om du är van vid ES6, vanilla JavaScript eller att använda jQuery, kan det till en början verka lite konstigt att utlösa Angular-händelser med jQuery.

Men när du väl förstår uppmärkningen och hur Angular hanterar sina händelser är det inte så illa.

Utlöser vinkelhändelser med jQuery

Angular fungerar lite annorlunda än jQuery i hur det interagerar med DOM närhelst en händelse inträffar.

Låt oss till exempel säga att med jQuery (eller till och med vanilla JavaScript) har vi en sida och sedan på den sidan finns en uppsättning markeringar som kan innehålla en mängd olika element. Dessa kan vara:

• rubriker,
• stycken,
• etiketter,
• välj element,
• och så vidare.

Med jQuery är vi vana vid att göra något så här:

1. hitta elementet som vi vill arbeta med antingen via ID, klassnamn eller något annat attribut,
2. lyssna efter en händelse,
3. svara på lämpligt sätt.

På grund av några av de nyare funktionerna i jQuery kan vi definiera anpassade händelser och sedan ställa in lyssnare och hantera dem på rätt sätt, men det allmänna beteendet är fortfarande detsamma.

Angular fungerar dock lite annorlunda.

För att hålla det enkelt (eftersom kom ihåg, jag försöker bara gå igenom den praktiska processen att utlösa Angular-händelser med jQuery), har Angular uppmärkning ungefär som alla vanliga HTML-dokument med ett undantag.

Alla Angular-baserade uppmärkningar drivs nämligen av anpassade attribut som har prefixet ng. Dessa säger åt Angular att lyssna efter vissa händelser när de inträffar och, när de gör det, vidta åtgärder.

Till exempel, om det finns ett attribut på ett element som ser ut så här :

Då betyder det att närhelst förändringshändelsen utlöses måste Angular avfyra lämplig hanterare och göra vad den behöver göra för att se till att data hanteras korrekt.

Men det är här den ursprungliga frågan ligger: Hur kan vi utlösa Angular-händelser med jQuery?

Lite upplägg

Innan jag går in på hur man gör detta vill jag skapa lite exempelkod som är baserad i Angular så vi är på samma sida när det gäller vad jag pratar om:

Kort sagt är detta ett utvalt element med ett antal alternativ. Målet är att dubbla:

1. ändra värdet programmatiskt med jQuery,
2. skicka informationen med inbyggda Angular-funktioner.

Enkelt nog, eller hur? Visst, men det finns några saker som är värda att notera och jag kommer att täcka dem i nästa avsnitt.

Nu till jQuery

Låt oss nu säga att vi ska göra något med de valda elementen men vi kommer inte att använda Angular. Istället kommer vi att använda jQuery.

Men på grund av hur lösningen har byggts, väntar Angular på att en förändringshändelse ska triggas på DOM så att ramverket kan göra sitt. Men jQuery fungerar annorlunda, eller hur? Istället tar den händelsen, använder abonnenten vi har ställt in och hanterar sedan det.

Det är här vårt arbete med att trigga Angular-händelser med jQuery kommer in i bilden. För att vara tydlig är det inte så enkelt som att ringa kod via jQuery så här :

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

Istället kan vi ställa in värdet med jQuery men då måste vi använda Angular för att trigga rätt händelsehanterare. Det är fortfarande förändringshändelsen, men hur vi gör det är olika.

I följande kod ser du var jag ändrar select-elementet för att ställa in dess andra alternativ som det valda alternativet och sedan instruera Angular att göra sin sak genom att utlösa förändringshändelsen som elementet är bundet till.

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

Som du kan se är det inte så mycket som är annorlunda; Men istället för att anropa trigger på elementet via jQuery, använder vi API:et från Angular. Och det kommer att ta hand om det.

Att använda sådana tekniker med förnuft

Jag är ingen Angular-expert (inte heller har jag påstått att jag är det), men när det kommer till att arbeta med en kraftigt modifierad anpassad tredjepartslösning och de verktyg jag har till mitt förfogande tillsammans med begränsningarna av tid och budget, är det till hjälp att veta hur man hanterar dessa saker.

Så kanske detta kommer att vara till hjälp för dig i ett framtida projekt.