Och jag vet, speciellt p\u00e5 senare \u00e5r, har m\u00e5nga tagit in komponenter som React<\/a><\/strong> och Vue<\/a><\/strong>.<\/p>\n I ett s\u00e5dant fall har jag arbetat en del med Angular<\/a><\/strong>. Och om du \u00e4r van vid ES6, vanilla JavaScript eller att anv\u00e4nda jQuery, kan det till en b\u00f6rjan verka lite konstigt att utl\u00f6sa Angular-h\u00e4ndelser med jQuery.<\/p>\n Men n\u00e4r du v\u00e4l f\u00f6rst\u00e5r uppm\u00e4rkningen och hur Angular hanterar sina h\u00e4ndelser \u00e4r det inte s\u00e5 illa.<\/p>\n Angular fungerar lite annorlunda \u00e4n jQuery i hur det interagerar med DOM n\u00e4rhelst en h\u00e4ndelse intr\u00e4ffar.<\/p>\n L\u00e5t oss till exempel s\u00e4ga att med jQuery (eller till och med vanilla JavaScript) har vi en sida och sedan p\u00e5 den sidan finns en upps\u00e4ttning markeringar som kan inneh\u00e5lla en m\u00e4ngd olika element. Dessa kan vara:<\/p>\n Med jQuery \u00e4r vi vana vid att g\u00f6ra n\u00e5got s\u00e5 h\u00e4r:<\/p>\n P\u00e5 grund av n\u00e5gra av de nyare funktionerna i jQuery kan vi definiera anpassade h\u00e4ndelser och sedan st\u00e4lla in lyssnare och hantera dem p\u00e5 r\u00e4tt s\u00e4tt, men det allm\u00e4nna beteendet \u00e4r fortfarande detsamma.<\/p>\n Angular fungerar dock lite annorlunda.<\/p>\n F\u00f6r att h\u00e5lla det enkelt (eftersom kom ih\u00e5g, jag f\u00f6rs\u00f6ker bara g\u00e5 igenom den praktiska processen att utl\u00f6sa Angular-h\u00e4ndelser med jQuery), har Angular uppm\u00e4rkning ungef\u00e4r som alla vanliga HTML-dokument med ett undantag.<\/p>\n Alla Angular-baserade uppm\u00e4rkningar drivs n\u00e4mligen av anpassade attribut som har prefixet ng.<\/strong> Dessa s\u00e4ger \u00e5t Angular att lyssna efter vissa h\u00e4ndelser n\u00e4r de intr\u00e4ffar och, n\u00e4r de g\u00f6r det, vidta \u00e5tg\u00e4rder.<\/p>\n Till exempel, om det finns ett attribut p\u00e5 ett element som ser ut s\u00e5 h\u00e4r<\/a><\/strong> :<\/p>\n D\u00e5 betyder det att n\u00e4rhelst f\u00f6r\u00e4ndringsh\u00e4ndelsen<\/strong> utl\u00f6ses m\u00e5ste Angular avfyra l\u00e4mplig hanterare och g\u00f6ra vad den beh\u00f6ver g\u00f6ra f\u00f6r att se till att data hanteras korrekt.<\/p>\n Men det \u00e4r h\u00e4r den ursprungliga fr\u00e5gan ligger: Hur kan vi utl\u00f6sa Angular-h\u00e4ndelser med jQuery?<\/p>\n Innan jag g\u00e5r in p\u00e5 hur man g\u00f6r detta vill jag skapa lite exempelkod<\/a><\/strong> som \u00e4r baserad i Angular s\u00e5 vi \u00e4r p\u00e5 samma sida n\u00e4r det g\u00e4ller vad jag pratar om:<\/p>\n Kort sagt \u00e4r detta ett utvalt element med ett antal alternativ. M\u00e5let \u00e4r att dubbla:<\/p>\n Enkelt nog, eller hur? Visst, men det finns n\u00e5gra saker som \u00e4r v\u00e4rda att notera och jag kommer att t\u00e4cka dem i n\u00e4sta avsnitt.<\/p>\n L\u00e5t oss nu s\u00e4ga att vi ska g\u00f6ra n\u00e5got med de valda<\/strong> elementen men vi kommer inte att anv\u00e4nda Angular. Ist\u00e4llet kommer vi att anv\u00e4nda jQuery.<\/p>\n Men p\u00e5 grund av hur l\u00f6sningen har byggts, v\u00e4ntar Angular p\u00e5 att en f\u00f6r\u00e4ndringsh\u00e4ndelse<\/strong> ska triggas p\u00e5 DOM s\u00e5 att ramverket kan g\u00f6ra sitt. Men jQuery fungerar annorlunda, eller hur? Ist\u00e4llet tar den h\u00e4ndelsen, anv\u00e4nder abonnenten vi har st\u00e4llt in och hanterar sedan det.<\/p>\n Det \u00e4r h\u00e4r v\u00e5rt arbete med att trigga Angular-h\u00e4ndelser med jQuery kommer in i bilden. F\u00f6r att vara tydlig \u00e4r det inte s\u00e5 enkelt som att ringa kod via jQuery s\u00e5 h\u00e4r<\/a><\/strong> :<\/p>\n Ist\u00e4llet kan vi st\u00e4lla in v\u00e4rdet med jQuery men d\u00e5 m\u00e5ste vi anv\u00e4nda Angular f\u00f6r att trigga r\u00e4tt h\u00e4ndelsehanterare. Det \u00e4r fortfarande f\u00f6r\u00e4ndringsh\u00e4ndelsen<\/strong>, men hur vi g\u00f6r det \u00e4r olika.<\/p>\n I f\u00f6ljande kod<\/a><\/strong> ser du var jag \u00e4ndrar select-elementet f\u00f6r att st\u00e4lla in dess andra alternativ som det valda alternativet och sedan instruera Angular att g\u00f6ra sin sak genom att utl\u00f6sa f\u00f6r\u00e4ndringsh\u00e4ndelsen<\/strong> som elementet \u00e4r bundet till.<\/p>\n Som du kan se \u00e4r det inte s\u00e5 mycket som \u00e4r annorlunda; Men ist\u00e4llet f\u00f6r att anropa trigger<\/a> p\u00e5 elementet via jQuery, anv\u00e4nder vi API:et fr\u00e5n Angular. Och det kommer att ta hand om det.<\/p>\n Jag \u00e4r ingen Angular-expert (inte heller har jag p\u00e5st\u00e5tt att jag \u00e4r det), men n\u00e4r det kommer till att arbeta med en kraftigt modifierad anpassad tredjepartsl\u00f6sning och de verktyg jag har till mitt f\u00f6rfogande tillsammans med begr\u00e4nsningarna av tid och budget, \u00e4r det till hj\u00e4lp att veta hur man hanterar dessa saker.<\/p>\n S\u00e5 kanske detta kommer att vara till hj\u00e4lp f\u00f6r dig i ett framtida projekt.<\/p>\n![\"Utl\u00f6ser](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"Utl\u00f6ser](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"Utl\u00f6ser](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nUtl\u00f6ser vinkelh\u00e4ndelser med 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>\nLite uppl\u00e4gg<\/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
Nu till 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>\nAtt anv\u00e4nda s\u00e5dana tekniker med f\u00f6rnuft<\/h2>\n