I wiem, zw\u0142aszcza w ostatnich latach, wielu wprowadzi\u0142o komponenty takie jak React<\/a><\/strong> i Vue<\/a><\/strong>.<\/p>\n W jednym z takich przypadk\u00f3w pracowa\u0142em z Angularem<\/a><\/strong>. A je\u015bli jeste\u015b przyzwyczajony do ES6, waniliowego JavaScriptu lub u\u017cywania jQuery, wyzwalanie zdarze\u0144 Angular za pomoc\u0105 jQuery mo\u017ce pocz\u0105tkowo wydawa\u0107 si\u0119 nieco dziwne.<\/p>\n Ale kiedy zrozumiesz znaczniki i jak Angular obs\u0142uguje swoje zdarzenia, nie jest tak \u017ale.<\/p>\n Angular dzia\u0142a nieco inaczej ni\u017c jQuery pod wzgl\u0119dem interakcji z DOM za ka\u017cdym razem, gdy ma miejsce zdarzenie.<\/p>\n Na przyk\u0142ad za\u0142\u00f3\u017cmy, \u017ce u\u017cywaj\u0105c jQuery (lub nawet waniliowego JavaScript), mamy stron\u0119, a nast\u0119pnie na tej stronie znajduje si\u0119 zestaw znacznik\u00f3w, kt\u00f3ry mo\u017ce zawiera\u0107 r\u00f3\u017cne elementy. Mog\u0105 to by\u0107:<\/p>\n Z jQuery jeste\u015bmy przyzwyczajeni do robienia czego\u015b takiego:<\/p>\n Ze wzgl\u0119du na niekt\u00f3re nowsze funkcje jQuery jeste\u015bmy w stanie zdefiniowa\u0107 zdarzenia niestandardowe, a nast\u0119pnie skonfigurowa\u0107 detektory i odpowiednio je obs\u0142u\u017cy\u0107, ale og\u00f3lne zachowanie jest nadal takie samo.<\/p>\n Angular dzia\u0142a jednak nieco inaczej.<\/p>\n Aby zachowa\u0107 prostot\u0119 (poniewa\u017c pami\u0119tam, po prostu pr\u00f3buj\u0119 przej\u015b\u0107 przez praktyczny proces wyzwalania zdarze\u0144 Angular za pomoc\u0105 jQuery), Angular ma znaczniki podobnie jak ka\u017cdy standardowy dokument HTML z wyj\u0105tkiem.<\/p>\n Mianowicie, ka\u017cdy znacznik oparty na Angularze jest sterowany przez niestandardowe atrybuty, kt\u00f3re s\u0105 poprzedzone ng.<\/strong> M\u00f3wi\u0105 one Angularowi, aby nas\u0142uchiwa\u0142 pewnych zdarze\u0144, kiedy si\u0119 wydarzaj\u0105, a kiedy to si\u0119 dzieje, podejmuje dzia\u0142ania.<\/p>\n Na przyk\u0142ad, je\u015bli w elemencie istnieje atrybut, kt\u00f3ry wygl\u0105da tak<\/a><\/strong> :<\/p>\n Oznacza to, \u017ce za ka\u017cdym razem, gdy\u00a0 wyzwalane jest zdarzenie zmiany<\/strong>, Angular musi uruchomi\u0107 odpowiedni\u0105 procedur\u0119 obs\u0142ugi i zrobi\u0107 wszystko, co konieczne, aby upewni\u0107 si\u0119, \u017ce dane s\u0105 obs\u0142ugiwane prawid\u0142owo.<\/p>\n Ale tutaj le\u017cy pierwotne pytanie: jak mo\u017cemy wywo\u0142a\u0107 zdarzenia Angular za pomoc\u0105 jQuery?<\/p>\n Zanim przejd\u0119 do tego, jak to zrobi\u0107, chc\u0119 utworzy\u0107 przyk\u0142adowy kod<\/a><\/strong> oparty na Angularze, wi\u0119c jeste\u015bmy na tej samej stronie w odniesieniu do tego, o czym m\u00f3wi\u0119:<\/p>\n Kr\u00f3tko m\u00f3wi\u0105c, jest to wybrany element z wieloma opcjami. Celem jest dwojakie:<\/p>\n Wystarczaj\u0105co proste, prawda? Jasne, ale jest kilka rzeczy, na kt\u00f3re warto zwr\u00f3ci\u0107 uwag\u0119 i om\u00f3wi\u0119 je w nast\u0119pnej sekcji.<\/p>\n Za\u0142\u00f3\u017cmy teraz, \u017ce zamierzamy zrobi\u0107 co\u015b z wybranymi<\/strong> elementami, ale nie b\u0119dziemy u\u017cywa\u0107 Angulara. Zamiast tego b\u0119dziemy u\u017cywa\u0107 jQuery.<\/p>\n Ale ze wzgl\u0119du na spos\u00f3b, w jaki zosta\u0142o zbudowane rozwi\u0105zanie, Angular czeka na wyzwolenie\u00a0 zdarzenia zmiany<\/strong> w DOM, aby framework m\u00f3g\u0142 wykona\u0107 swoje zadanie. Ale jQuery dzia\u0142a inaczej, prawda? Zamiast tego przyjmuje zdarzenie, wykorzystuje skonfigurowanego przez nas subskrybenta, a nast\u0119pnie go obs\u0142uguje.<\/p>\n W tym momencie w gr\u0119 wchodzi nasza praca z wyzwalaniem zdarze\u0144 Angular za pomoc\u0105 jQuery. \u017beby by\u0142o jasne, nie jest to tak proste, jak wywo\u0142ywanie kodu przez jQuery w ten<\/a><\/strong> spos\u00f3b :<\/p>\n Zamiast tego mo\u017cemy ustawi\u0107 warto\u015b\u0107 za pomoc\u0105 jQuery, ale nast\u0119pnie musimy u\u017cy\u0107 Angulara, aby wyzwoli\u0107 odpowiedni\u0105 obs\u0142ug\u0119 zdarze\u0144. To wci\u0105\u017c\u00a0 wydarzenie zmiany<\/strong>, ale spos\u00f3b, w jaki to robimy, jest inny.<\/p>\n W poni\u017cszym kodzie<\/a><\/strong> zobaczysz, gdzie zmieniam element select, aby ustawi\u0107 jego drug\u0105 opcj\u0119 jako wybran\u0105 opcj\u0119, a nast\u0119pnie poinstruuj\u0119 Angular, aby wykona\u0142 swoje zadanie, wyzwalaj\u0105c zdarzenie change<\/strong>, z kt\u00f3rym element jest powi\u0105zany.<\/p>\n Jak wida\u0107, niewiele si\u0119 r\u00f3\u017cni; jednak zamiast wywo\u0142ywa\u0107 wyzwalacz<\/a> na elemencie za po\u015brednictwem jQuery, u\u017cywamy API dostarczanego przez Angular. I to si\u0119 tym zajmie.<\/p>\n Nie jestem ekspertem Angular (ani nie twierdzi\u0142em, \u017ce jestem), ale je\u015bli chodzi o prac\u0119 z mocno zmodyfikowanym niestandardowym rozwi\u0105zaniem innej firmy i narz\u0119dziami, kt\u00f3re mam do dyspozycji wraz z ograniczeniami czasu i bud\u017cetu, jest to pomocne wiedzie\u0107, jak sobie z tym poradzi\u0107.<\/p>\n By\u0107 mo\u017ce wi\u0119c pomo\u017ce ci to w przysz\u0142ym projekcie.<\/p>\n![\"Wyzwalanie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"Wyzwalanie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"Wyzwalanie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nWyzwalanie zdarze\u0144 k\u0105towych za pomoc\u0105 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>\nMa\u0142a konfiguracja<\/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
Teraz do 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>\nRozs\u0105dne korzystanie z takich technik<\/h2>\n