Ja ma tean, et eriti viimastel aastatel on paljud sisse toonud selliseid komponente nagu React<\/a><\/strong> ja Vue<\/a><\/strong>.<\/p>\n \u00dchel sellisel juhul olen Angulariga veidi t\u00f6\u00f6d teinud<\/a><\/strong>. Ja kui olete harjunud ES6, vanilje JavaScripti v\u00f5i jQuery kasutamisega, v\u00f5ib Angular s\u00fcndmuste k\u00e4ivitamine jQueryga alguses tunduda pisut veider.<\/p>\n Kuid kui m\u00f5istate m\u00e4rgistust ja seda, kuidas Angular oma s\u00fcndmusi k\u00e4sitleb, pole see nii hull.<\/p>\n Angular t\u00f6\u00f6tab jQueryst pisut erinevalt selle poolest, kuidas see DOM-iga suhtleb, kui s\u00fcndmus juhtub.<\/p>\n N\u00e4iteks oletame, et jQuery (v\u00f5i isegi vanilje JavaScripti) kasutamisel on meil leht ja sellel lehel on m\u00e4rgistus, mis v\u00f5ib sisaldada mitmesuguseid elemente. Need v\u00f5ivad olla:<\/p>\n jQueryga oleme harjunud tegema midagi sellist:<\/p>\n M\u00f5nede jQuery uuemate funktsioonide t\u00f5ttu saame m\u00e4\u00e4ratleda kohandatud s\u00fcndmusi ja seej\u00e4rel seadistada kuulajaid ning neid asjakohaselt k\u00e4sitleda, kuid \u00fcldine k\u00e4itumine on endiselt sama.<\/p>\n Angular t\u00f6\u00f6tab siiski veidi teisiti.<\/p>\n Et see oleks arusaadav (sest pidage meeles, et ma lihtsalt \u00fcritan jQuery abil nurgeliste s\u00fcndmuste k\u00e4ivitamise praktilist protsessi l\u00e4bi viia), on Angularil m\u00e4rgistus sarnaselt k\u00f5igi tavaliste HTML-dokumentidega, v\u00e4lja arvatud erandiga.<\/p>\n Nimelt juhivad mis tahes nurgap\u00f5hist m\u00e4rgistust kohandatud atribuudid, mille eesliide on ng.<\/strong> Need k\u00e4sivad Angularil kuulata teatud s\u00fcndmusi, kui need juhtuvad, ja kui need juhtuvad, siis tegutsema.<\/p>\n N\u00e4iteks kui elemendil on atribuut, mis n\u00e4eb v\u00e4lja selline<\/a><\/strong> :<\/p>\n See t\u00e4hendab, et iga kord, kui muudatuse<\/strong> s\u00fcndmus k\u00e4ivitatakse, peab Angular k\u00e4ivitama vastava t\u00f6\u00f6tleja ja tegema k\u00f5ik, mida ta peab tegema, et tagada andmete \u00f5ige k\u00e4sitlemine.<\/p>\n Kuid siin peitubki esialgne k\u00fcsimus: kuidas saame jQuery abil nurgelisi s\u00fcndmusi k\u00e4ivitada?<\/p>\n Enne seda, kuidas seda teha, tahan luua n\u00e4idiskoodi,<\/a><\/strong> mis p\u00f5hineb Angularil, nii et oleme sellega, millest r\u00e4\u00e4gin, samal lehel:<\/p>\n L\u00fchidalt \u00f6eldes on see valik element, millel on mitmeid valikuid. Eesm\u00e4rk on kahekordne:<\/p>\n Piisavalt otsekohene, eks? Muidugi, kuid on m\u00f5ned asjad, mis v\u00e4\u00e4rivad t\u00e4helepanu ja ma k\u00e4sitlen neid j\u00e4rgmises jaotises.<\/p>\n Oletame n\u00fc\u00fcd, et teeme midagi valitud<\/strong> elementidega, kuid me ei kasuta Angulari. Selle asemel hakkame kasutama jQueryt.<\/p>\n Kuid lahenduse \u00fclesehitamise viisi t\u00f5ttu ootab Angular,\u00a0 kuni DOM-is k\u00e4ivitub muudatuss\u00fcndmus<\/strong>, et raamistik saaks oma asja teha. Kuid jQuery t\u00f6\u00f6tab teisiti, eks? Selle asemel v\u00f5tab see s\u00fcndmuse, kasutab meie seadistatud tellijat ja seej\u00e4rel tegeleb sellega.<\/p>\n Siin tuleb m\u00e4ngu meie t\u00f6\u00f6 Angular s\u00fcndmuste k\u00e4ivitamisel jQuery abil. Selguse huvides ei ole see nii lihtne kui koodi helistamine jQuery kaudu, nagu see<\/a><\/strong> :<\/p>\n Selle asemel saame v\u00e4\u00e4rtuse m\u00e4\u00e4rata jQuery abil, kuid siis peame \u00f5ige s\u00fcndmuste k\u00e4itleja k\u00e4ivitamiseks kasutama Angular. See on endiselt muutuste<\/strong> s\u00fcndmus, kuid see, kuidas me seda teeme, on erinev.<\/p>\n J\u00e4rgmises koodis<\/a><\/strong> n\u00e4ete, kus ma muudan valitud elementi, et m\u00e4\u00e4rata selle teine \u200b\u200bvalik valitud suvandiks, ja seej\u00e4rel juhendada Angular seda tegema, k\u00e4ivitades muudatuse<\/strong> s\u00fcndmuse, millega element on seotud.<\/p>\n Nagu n\u00e4ete, ei erine seal palju; aga selle asemel, et kutsuda\u00a0 elemendi p\u00e4\u00e4stikut<\/a> jQuery kaudu, kasutame Angulari pakutavat API-d. Ja see hoolitseb selle eest.<\/p>\n Ma ei ole Angular-ekspert (ega ka v\u00e4itnud, et olen), kuid kui tegemist on tugevalt muudetud kohandatud kolmanda osapoole lahendusega t\u00f6\u00f6tamisega ja minu k\u00e4sutuses olevate t\u00f6\u00f6riistadega ning aja- ja eelarvepiirangutega, on see kasulik. teada, kuidas neid asju k\u00e4sitleda.<\/p>\n Nii et v\u00f5ib-olla on see teile tulevases projektis abiks.<\/p>\n![\"Nurgas\u00fcndmuste](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"Nurgas\u00fcndmuste](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"Nurgas\u00fcndmuste](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nNurgas\u00fcndmuste k\u00e4ivitamine jQuery abil<\/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>\nV\u00e4ike seadistus<\/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
N\u00fc\u00fcd jQuery juurde<\/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>\nSelliste tehnikate m\u00f5istlik kasutamine<\/h2>\n