Et je sais, surtout ces derni\u00e8res ann\u00e9es, que beaucoup ont apport\u00e9 des composants tels que React<\/a><\/strong> et Vue<\/a><\/strong>.<\/p>\n Dans un tel cas, j’ai travaill\u00e9 avec Angular<\/a><\/strong>. Et si vous \u00eates habitu\u00e9 \u00e0 ES6, \u00e0 JavaScript vanille ou \u00e0 l’utilisation de jQuery, le d\u00e9clenchement d’\u00e9v\u00e9nements angulaires avec jQuery peut sembler un peu bizarre au d\u00e9but.<\/p>\n Mais une fois que vous avez compris le balisage et comment Angular g\u00e8re ses \u00e9v\u00e9nements, ce n’est pas si mal.<\/p>\n Angular fonctionne un peu diff\u00e9remment de jQuery dans la fa\u00e7on dont il interagit avec le DOM chaque fois qu’un \u00e9v\u00e9nement se produit.<\/p>\n Par exemple, disons qu’en utilisant jQuery (ou m\u00eame du JavaScript vanille), nous avons une page, puis dans cette page se trouve un ensemble de balisage pouvant inclure une vari\u00e9t\u00e9 d’\u00e9l\u00e9ments. Ceux-ci peuvent \u00eatre :<\/p>\n Avec jQuery, nous avons l’habitude de faire quelque chose comme ceci\u00a0:<\/p>\n En raison de certaines des fonctionnalit\u00e9s les plus r\u00e9centes de jQuery, nous sommes en mesure de d\u00e9finir des \u00e9v\u00e9nements personnalis\u00e9s, puis de configurer des \u00e9couteurs et de les g\u00e9rer de mani\u00e8re appropri\u00e9e, mais le comportement g\u00e9n\u00e9ral reste le m\u00eame.<\/p>\n Angular fonctionne un peu diff\u00e9remment, cependant.<\/p>\n Pour rester simple (car rappelez-vous, j’essaie juste de parcourir le processus pratique de d\u00e9clenchement d’\u00e9v\u00e9nements Angular avec jQuery), Angular a un balisage un peu comme n’importe quel document HTML standard avec une exception.<\/p>\n \u00c0 savoir, tout balisage bas\u00e9 sur Angular est pilot\u00e9 par des attributs personnalis\u00e9s pr\u00e9fix\u00e9s par ng.<\/strong> Ceux-ci indiquent \u00e0 Angular d’\u00e9couter certains \u00e9v\u00e9nements lorsqu’ils se produisent et, lorsqu’ils se produisent, d’agir.<\/p>\n Par exemple, s’il y a un attribut sur un \u00e9l\u00e9ment qui ressemble \u00e0 ceci<\/a><\/strong>\u00a0:<\/p>\n Ensuite, cela signifie que chaque fois que l’\u00a0 \u00e9v\u00e9nement de changement<\/strong> est d\u00e9clench\u00e9, Angular doit d\u00e9clencher le gestionnaire appropri\u00e9 et faire tout ce qu’il doit faire pour s’assurer que les donn\u00e9es sont g\u00e9r\u00e9es correctement.<\/p>\n Mais c’est l\u00e0 que r\u00e9side la question initiale\u00a0: comment d\u00e9clencher des \u00e9v\u00e9nements angulaires avec jQuery\u00a0?<\/p>\n Avant d’entrer dans la fa\u00e7on de proc\u00e9der, je souhaite cr\u00e9er un exemple de code<\/a><\/strong> bas\u00e9 sur Angular afin que nous soyons sur la m\u00eame page en ce qui concerne ce dont je parle:<\/p>\n En bref, il s’agit d’un \u00e9l\u00e9ment de s\u00e9lection avec un certain nombre d’options. L’objectif est double :<\/p>\n Assez simple, non? Bien s\u00fbr, mais il y a quelques points \u00e0 noter et je les couvrirai dans la section suivante.<\/p>\n Maintenant, disons que nous allons faire quelque chose avec les\u00a0 \u00e9l\u00e9ments select<\/strong> mais nous n’allons pas utiliser Angular. Au lieu de cela, nous allons utiliser jQuery.<\/p>\n Mais en raison de la fa\u00e7on dont la solution a \u00e9t\u00e9 construite, Angular attend qu’un\u00a0 \u00e9v\u00e9nement de changement<\/strong> soit d\u00e9clench\u00e9 sur le DOM pour que le framework puisse faire son travail. Mais jQuery fonctionne diff\u00e9remment, n’est-ce pas? Au lieu de cela, il prend l’\u00e9v\u00e9nement, utilise l’abonn\u00e9 que nous avons configur\u00e9, puis le g\u00e8re.<\/p>\n C’est l\u00e0 que notre travail de d\u00e9clenchement d’\u00e9v\u00e9nements Angular avec jQuery entre en jeu. Pour \u00eatre clair, ce n’est pas aussi simple que d’appeler du code via jQuery comme ceci<\/a><\/strong> :<\/p>\n Au lieu de cela, nous pouvons d\u00e9finir la valeur avec jQuery, mais nous devons ensuite utiliser Angular pour d\u00e9clencher le gestionnaire d’\u00e9v\u00e9nements appropri\u00e9. C’est toujours l’\u00a0 \u00e9v\u00e9nement du changement<\/strong>, mais la fa\u00e7on dont nous le faisons est diff\u00e9rente.<\/p>\n Dans le code suivant<\/a><\/strong>, vous verrez o\u00f9 je modifie l’\u00e9l\u00e9ment select pour d\u00e9finir sa deuxi\u00e8me option comme option s\u00e9lectionn\u00e9e, puis demander \u00e0 Angular de faire son travail en d\u00e9clenchant l’ \u00e9v\u00e9nement change<\/strong> auquel l’\u00e9l\u00e9ment est li\u00e9.<\/p>\n Comme vous pouvez le voir, il n’y a pas grand-chose de diff\u00e9rent ; cependant, plut\u00f4t que d’appeler\u00a0 le d\u00e9clencheur<\/a> sur l’\u00e9l\u00e9ment via jQuery, nous utilisons l’API fournie par Angular. Et cela s’en occupera.<\/p>\n Je ne suis pas un expert d’Angular (et je n’ai pas pr\u00e9tendu l’\u00eatre), mais lorsqu’il s’agit de travailler avec une solution tierce personnalis\u00e9e fortement modifi\u00e9e et les outils dont je dispose ainsi que les contraintes de temps et de budget, c’est utile savoir comment g\u00e9rer ces choses.<\/p>\n Alors peut-\u00eatre que cela vous sera utile dans un futur projet.<\/p>\n![\"D\u00e9clencher](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"D\u00e9clencher](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"D\u00e9clencher](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nD\u00e9clencher des \u00e9v\u00e9nements angulaires avec 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 petit montage<\/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
Maintenant \u00e0 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>\nUtiliser judicieusement de telles techniques<\/h2>\n