Déclencher des événements angulaires avec jQuery

L’une des choses que j’apprécie dans le travail avec WordPress est la possibilité d’apporter des bibliothèques et des outils tiers avec lesquels travailler.

Cela ne signifie pas qu’ils ne viennent pas sans leur courbe d’apprentissage (ils le font tous, n’est-ce pas ?), Mais il est souvent amusant – bien que parfois frustrant – d’incorporer puis de manipuler ce que vous faites.

En ce qui concerne les technologies tierces, j’ai vu des gens apporter des éléments tels que le package Laravel Illuminate avec WordPress.

Et je sais, surtout ces dernières années, que beaucoup ont apporté des composants tels que React et Vue.

Dans un tel cas, j’ai travaillé avec Angular. Et si vous êtes habitué à ES6, à JavaScript vanille ou à l’utilisation de jQuery, le déclenchement d’événements angulaires avec jQuery peut sembler un peu bizarre au début.

Mais une fois que vous avez compris le balisage et comment Angular gère ses événements, ce n’est pas si mal.

Déclencher des événements angulaires avec jQuery

Angular fonctionne un peu différemment de jQuery dans la façon dont il interagit avec le DOM chaque fois qu’un événement se produit.

Par exemple, disons qu’en utilisant jQuery (ou même du JavaScript vanille), nous avons une page, puis dans cette page se trouve un ensemble de balisage pouvant inclure une variété d’éléments. Ceux-ci peuvent être :

• rubriques,
• paragraphes,
• Étiquettes,
• sélectionner des éléments,
• etc.

Avec jQuery, nous avons l’habitude de faire quelque chose comme ceci :

1. trouver l’élément sur lequel on veut opérer soit via ID, nom de classe, ou un autre attribut,
2. écouter un événement,
3. répondre de manière appropriée.

En raison de certaines des fonctionnalités les plus récentes de jQuery, nous sommes en mesure de définir des événements personnalisés, puis de configurer des écouteurs et de les gérer de manière appropriée, mais le comportement général reste le même.

Angular fonctionne un peu différemment, cependant.

Pour rester simple (car rappelez-vous, j’essaie juste de parcourir le processus pratique de déclenchement d’événements Angular avec jQuery), Angular a un balisage un peu comme n’importe quel document HTML standard avec une exception.

À savoir, tout balisage basé sur Angular est piloté par des attributs personnalisés préfixés par ng. Ceux-ci indiquent à Angular d’écouter certains événements lorsqu’ils se produisent et, lorsqu’ils se produisent, d’agir.

Par exemple, s’il y a un attribut sur un élément qui ressemble à ceci :

Ensuite, cela signifie que chaque fois que l’  événement de changement est déclenché, Angular doit déclencher le gestionnaire approprié et faire tout ce qu’il doit faire pour s’assurer que les données sont gérées correctement.

Mais c’est là que réside la question initiale : comment déclencher des événements angulaires avec jQuery ?

Un petit montage

Avant d’entrer dans la façon de procéder, je souhaite créer un exemple de code basé sur Angular afin que nous soyons sur la même page en ce qui concerne ce dont je parle:

En bref, il s’agit d’un élément de sélection avec un certain nombre d’options. L’objectif est double :

1. modifier par programmation la valeur à l’aide de jQuery,
2. envoyer les informations à l’aide des fonctions angulaires natives.

Assez simple, non? Bien sûr, mais il y a quelques points à noter et je les couvrirai dans la section suivante.

Maintenant à jQuery

Maintenant, disons que nous allons faire quelque chose avec les  éléments select mais nous n’allons pas utiliser Angular. Au lieu de cela, nous allons utiliser jQuery.

Mais en raison de la façon dont la solution a été construite, Angular attend qu’un  événement de changement soit déclenché sur le DOM pour que le framework puisse faire son travail. Mais jQuery fonctionne différemment, n’est-ce pas? Au lieu de cela, il prend l’événement, utilise l’abonné que nous avons configuré, puis le gère.

C’est là que notre travail de déclenchement d’événements Angular avec jQuery entre en jeu. Pour être clair, ce n’est pas aussi simple que d’appeler du code via jQuery comme ceci :

$('select['ng-model="item.payment_method"]').trigger('change');

Au lieu de cela, nous pouvons définir la valeur avec jQuery, mais nous devons ensuite utiliser Angular pour déclencher le gestionnaire d’événements approprié. C’est toujours l’  événement du changement, mais la façon dont nous le faisons est différente.

Dans le code suivant, vous verrez où je modifie l’élément select pour définir sa deuxième option comme option sélectionnée, puis demander à Angular de faire son travail en déclenchant l’ événement change auquel l’élément est lié.

$('select[ng-model="schedule.payment_method"]').each(function() {

  // For the purposes of this example, we're going to select the first option.
  $(this)
    .children('option:eq(1)')
    .attr('selected', 'selected');

  // Make sure the select element reflects the change (as setting the option doesn't always do this properly).
  $(this).val($(this).children('option:selected').attr('value'));

  // Now use the Angular API's triggerHandler function to call the change.
  angular.element($(this)).triggerHandler('change');
});

Comme vous pouvez le voir, il n’y a pas grand-chose de différent ; cependant, plutôt que d’appeler  le déclencheur sur l’élément via jQuery, nous utilisons l’API fournie par Angular. Et cela s’en occupera.

Utiliser judicieusement de telles techniques

Je ne suis pas un expert d’Angular (et je n’ai pas prétendu l’être), mais lorsqu’il s’agit de travailler avec une solution tierce personnalisée fortement modifiée et les outils dont je dispose ainsi que les contraintes de temps et de budget, c’est utile savoir comment gérer ces choses.

Alors peut-être que cela vous sera utile dans un futur projet.