Gestion des clics instantanés pour deux ou plusieurs directives identiques

J’essaie de créer une fonctionnalité de clic pour une directive AngularJS (c’est-à-dire lorsque l’utilisateur ne clique pas sur un élément donné, elle se cache).

J’ajoute un événement à $ (body) qui détecte un clic.

Je vérifie ensuite si ma directive ou l’un de ses enfants a été cliqué. S’ils ne l’ont pas fait, cela cache une div.

Cela fonctionne bien quand j’ai une directive, mais au moment où j’ajoute une seconde du même genre, c’est la seconde qui gère l’événement $ (body) .click (). Le premier ne fait pas de recherche.

Mon code est le suivant (j’en ai retiré une grande partie):

angular.module('ma.directives') .directive('maDropdownPanel', function () { var directiveId = null; return { ressortingct: "E", transclude: true, templateUrl: "maDropdownPanel.html", scope: {}, link: function (scope, element, atsortingbutes) { $('body').on('click', scope.handleClickAway); // Get an ID unique to this particular directive. directiveId = "ma-dropdown-panel" + scope.$id; }, controller: function ($scope) { $scope.handleClickAway = function (event) { // The following shows which directive took it. Out of two, it's always the second (ie. the last to register the event). console.log(directiveId); } } } });

J’ai l’impression que si je peux appeler le bon, je peux gérer le rest.

Toute aide serait appréciée Merci.

Je suggérerais de rendre cet événement de directive spécifique à un click en ajoutant le nom de l’événement de clic tel que click.panelClick1 & il serait spécifique à chaque élément, transmettez le paramètre slug en utilisant atsortingbut, mais vous devez modifier cette valeur chaque fois que vous indiquez une directive

Une autre bonne approche serait de définir ce paramètre slug pour l’unicité de l’événement click en faisant quelque chose comme la fonction Math.Random() qui renverra une valeur aléatoire.

Html

Directif

 angular.module('ma.directives') .directive('maDropdownPanel', function() { var directiveId = null; return { ressortingct: "E", transclude: true, templateUrl: "maDropdownPanel.html", scope: {}, link: function(scope, element, atsortingbutes) { $('body').on('click.panelClick' + atsortingbutes.slug, scope.handleClickAway); // Get an ID unique to this particular directive. directiveId = "ma-dropdown-panel" + scope.$id; }, controller: function($scope) { $scope.handleClickAway = function(event) { // The following shows which directive took it. Out of two, it's always the second (ie. the last to register the event). console.log(directiveId); } } } });

J’ai trouvé un moyen de le faire. Le commentaire d’Enzey a fourni l’indice:

Deuxièmement, l’événement de clic que vous enregistrez doit être supprimé à un moment ou jusqu’à ce qu’il existe pour toujours et qu’il soit toujours évalué.

La clé était de:

Enregistrez l’événement click lorsque la div est affichée.
Supprimez l’événement click lorsque la div est masquée.

Parce qu’un clic éloigne la div:

Il n’y a aucune chance que plus d’une div soit visible à la fois.
Cela signifie qu’un seul événement clic pertinent sera enregistré à la fois.
Et cela signifie qu’il n’y a pas de conflit entre différents événements / directives de clic.

J’espère que cela a du sens.