4 Mai 2015

Une modale de confirmation avec AngularJS?

Bonjour à tous et toutes!

Si vous êtes en train de vous demander comment mettre en place une modale de confirmation super simple en utilisant AngularJS, sans utiliser de JQuery ou autre, voila un petit guide qui, je l’espère, saura se révéler utile.

Un exemple fonctionnel est disponible ici: JSFiddle

La première chose à se demander est “Comment fonctionne un système de confirmation?”

Très simplement, lorsque nous demandons une confirmation, il s’agit de réaliser ensuite une action que nous aurions pu effectuer sans, mais pour laquelle nous préférerions avoir l’assentiment de l’utilisateur.

Selon sa réponse, nous réaliserons, ou non, ladite opération. Cela ne vous rappelle rien? Même pas le mécanisme des promises? Si?

Ça tombe bien, c’est ce que nous allons utiliser.

Lorsque nous demandons la confirmation de l’utilisateur, nous émettons une demande. Nous allons avoir besoin de stocker cette demande.

Lorsque cette confirmation est accordée, nous souhaitons alors réaliser l’action. Dans le cas contraire, il faudra simplement supprimer la demande.

Cela nous amène donc à ajouter la fonction “supprimerLaDemande”.

En général, il sera utile à l’utilisateur de voir que nous lui demandons quelque chose, il faudra donc qu’une popin, une popup ou n’importe quoi d’autre attire son regard.

Souhaitez-vous confirmer?

Comme vous pouvez le constater, j’ai déjà ajouté les boutons permettant de confirmer ou non la demande en attente.
Ces deux boutons appellent une même méthode – qui n’existe pas encore, mais cela viendra -, avec un booleen indiquant si oui, ou non, l’utilisateur confirme son action.

Passons maintenant à la méthode “confirm” en question.

En réalisant ceci, lorsque l’utilisateur clique sur “oui”, l’action désirée est réalisée, alors que s’il clique sur non, la demande de confirmation est simplement supprimée.

Il ne manque qu’une petite chose pour avoir une modale de confirmation fonctionnelle: si l’utilisateur confirme, on doit réaliser l’action, ET supprimer la demande. C’est très simple à ajouter, et cela nous donne le controlleur suivant:

Et voila, vous disposez maintenant d’un bout de code très simple permettant de remplacer facilement le traditionnel “confirm”!

Share