AngularJS utiliser une directive pour empêcher d'autres directives pour exécuter

Question

Certaines actions dans mon Angulaire application exigent que l'utilisateur soit enregistré.Si l'utilisateur n'est pas enregistré, nous voulons montrer un "Registre modal" et d'empêcher l'action d'origine.

Ces actions peuvent être déclenchées par ng-click ou tout autre ", cliquez sur" liaison de la directive (par exemple, le "modal-toggle' un).

J'ai donc trouvé cette solution: https://stackoverflow.com/a/16211108/2719044

C'est assez sympa mais ne fonctionne qu'avec ng-click.

J'ai d'abord voulu faire le "terminal" de la propriété de la directive dynamique, mais n'a pas réussi à le faire.

L'idée était donc de définir "terminal" pour de vrai et manuellement prévenir par défaut cliquez sur actions dans la directive.

Voici mon DOM

<!-- This can work with terminal:true and scope.$eval(attrs.ngClick) (see example above) -->
<div user-needed ng-click="myAction()">Do it !</div> 

<!-- This doesn't work. I can't manage to prevent the modal-toggle to be executed -->
<div user-needed modal-toggle="my-modal-id-yey">Show yourself modal !</div> 

Et mon directive(s) (qui ne fonctionnent pas...)

// First try (with terminal:true)
app.directive('userNeeded', function() {
    return {
        priority: -100,
        terminal: true,
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(isRegistered()) {
                    // Here we do the action like scope.$eval or something
                }
            });
        }
    };
});

// Second try (with stopPropagation)
app.directive('userNeeded', function() {
    return {
        priority: -100
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(!isRegistered()) {
                    e.stopPropagation();
                }
            });
        }
    };
});

...Et c'est pourquoi je suis ici.Une idée ?

Merci beaucoup.

Answer 1

Vous avez été très proche.Au lieu de stopPropagation besoin de vous arrêterImmédiateDe Propagation.La différence entre les deux est résumée dans cette StackOverflow répondre par @Dave:

stopPropagation permettra d'éviter toute parent gestionnaires exécutée alors que stopImmediatePropagation va faire la même chose mais aussi empêcher les autres gestionnaires de l'exécution.

Donc, pour corriger le code, tout ce que nous avons à faire est de swap que de la méthode et Voilà:

app.directive('userNeeded', function() {
    return {
        priority: -100
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(!isRegistered()) {
                    e.stopImmediatePropagation();
                }
            });
        }
    };
});

Voici un exemple Plunker du code de travail.Dans l'exemple j'ai modifié la directive légèrement afin de permettre à certains événements à préciser (comme user-needed="submit") en passant directement la valeur de la element.bind fonction;toutefois, la valeur par défaut est "click".