E so che, soprattutto negli ultimi anni, molti hanno introdotto componenti come React<\/a><\/strong> e Vue<\/a><\/strong>.<\/p>\n In uno di questi casi, ho lavorato con Angular<\/a><\/strong>. E se sei abituato a ES6, JavaScript vanilla o usi jQuery, l’attivazione di eventi angolari con jQuery pu\u00f2 sembrare un po’ strano all’inizio.<\/p>\n Ma una volta compreso il markup e il modo in cui Angular gestisce i suoi eventi, non \u00e8 cos\u00ec male.<\/p>\n Angular funziona in modo leggermente diverso rispetto a jQuery nel modo in cui interagisce con il DOM ogni volta che si verifica un evento.<\/p>\n Ad esempio, diciamo che usando jQuery (o anche JavaScript vanilla), abbiamo una pagina e quindi all’interno di quella pagina c’\u00e8 un insieme di markup che pu\u00f2 includere una variet\u00e0 di elementi. Questi possono essere:<\/p>\n Con jQuery, siamo abituati a fare qualcosa del genere:<\/p>\n A causa di alcune delle nuove funzionalit\u00e0 di jQuery, siamo in grado di definire eventi personalizzati e quindi impostare listener e gestirli in modo appropriato, ma il comportamento generale \u00e8 sempre lo stesso.<\/p>\n Angular funziona in modo leggermente diverso, per\u00f2.<\/p>\n Per semplificare (perch\u00e9 ricorda, sto solo cercando di illustrare il processo pratico di attivazione di eventi angolari con jQuery), Angular ha un markup molto simile a qualsiasi documento HTML standard con un’eccezione.<\/p>\n Vale a dire, qualsiasi markup basato su Angular \u00e8 guidato da attributi personalizzati che sono preceduti da ng.<\/strong> Questi dicono ad Angular di ascoltare determinati eventi quando accadono e, quando si verificano, di agire.<\/p>\n Ad esempio, se c’\u00e8 un attributo su un elemento che assomiglia a questo<\/a><\/strong> :<\/p>\n Quindi significa che ogni volta che viene attivato l’\u00a0 evento di modifica<\/strong>, Angular deve attivare il gestore appropriato e fare tutto il necessario per assicurarsi che i dati vengano gestiti correttamente.<\/p>\n Ma \u00e8 qui che si trova la domanda originale: come possiamo attivare eventi angolari con jQuery?<\/p>\n Prima di entrare in come farlo, voglio creare del codice<\/a><\/strong> di esempio basato su Angular, quindi siamo sulla stessa pagina per quanto riguarda ci\u00f2 di cui sto parlando:<\/p>\n In breve, questo \u00e8 un elemento selezionato con una serie di opzioni. L’obiettivo \u00e8 raddoppiare:<\/p>\n Abbastanza semplice, giusto? Certo, ma ci sono alcune cose degne di nota e le tratter\u00f2 nella prossima sezione.<\/p>\n Ora, diciamo che faremo qualcosa con gli\u00a0 elementi select<\/strong> ma non useremo Angular. Invece, useremo jQuery.<\/p>\n Ma a causa del modo in cui \u00e8 stata creata la soluzione, Angular attende l’attivazione di un\u00a0 evento di modifica<\/strong> sul DOM in modo che il framework possa fare il suo dovere. Ma jQuery funziona in modo diverso, giusto? Invece, prende l’evento, usa l’abbonato che abbiamo impostato e quindi lo gestisce.<\/p>\n \u00c8 qui che entra in gioco il nostro lavoro con l’attivazione di eventi angolari con jQuery. Per essere chiari, non \u00e8 semplice come chiamare il codice tramite jQuery in questo modo<\/a><\/strong> :<\/p>\n Invece, possiamo impostare il valore con jQuery ma poi dobbiamo usare Angular per attivare il corretto gestore di eventi. \u00c8 ancora l’\u00a0 evento del cambiamento<\/strong>, ma il modo in cui lo facciamo \u00e8 diverso.<\/p>\n Nel codice seguente<\/a><\/strong>, vedrai dove sto modificando l’elemento select per impostare la sua seconda opzione come opzione selezionata e quindi istruire Angular a fare il suo lavoro attivando l’ evento di modifica<\/strong> a cui \u00e8 associato l’elemento.<\/p>\n Come puoi vedere, non c’\u00e8 molto di diverso; tuttavia, anzich\u00e9 chiamare trigger<\/a> sull’elemento tramite jQuery, utilizziamo l’API fornita da Angular. E questo se ne occuper\u00e0.<\/p>\n Non sono un esperto di Angular (n\u00e9 ho affermato di esserlo), ma quando si tratta di lavorare con una soluzione personalizzata di terze parti pesantemente modificata e gli strumenti che ho a mia disposizione insieme ai vincoli di tempo e budget, \u00e8 utile sapere come gestire queste cose.<\/p>\n Quindi forse questo ti sar\u00e0 di aiuto in un progetto futuro.<\/p>\n![\"Attivazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"Attivazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"Attivazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nAttivazione di eventi angolari con 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>\nUn po’ di configurazione<\/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
Ora a 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>\nUsando giudiziosamente tali tecniche<\/h2>\n