AngularJS utilizza una direttiva per impedire che altre direttive da eseguire

Question

Alcune azioni nella mia app angolare richiedono che l'utente sia registrato.Se l'utente non è registrato, vogliamo mostrare un "registro modale" e impedire l'azione originale.

Queste azioni possono essere attivate tramite NG-clic o qualsiasi altra direttiva "Fare clic su Binding" (ad esempio il "Modal-Toggle").

Quindi ho trovato questa soluzione: https://stackoverflow.com/a/16211108/2719044

Questo è abbastanza bello ma funziona solo con NG-clic.

Ho voluto per la prima volta la proprietà "Terminal" della Direttiva Dynamic ma non riusciva a farlo.

Quindi l'idea era di impostare "Terminale" a True e previene manualmente predefinito fare clic su Azione nella direttiva.

Ecco il mio 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> 

.

E la mia direttiva (s) (che non funzionano ...)

// 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();
                }
            });
        }
    };
});

.

... ed è per questo che sono qui.Qualche idea?

Grazie mille.

Answer 1

Sei stato estremamente vicino.Invece di stoppropagation hai bisogno di stop immediata propagazione.La differenza tra i due è riassunta in Questa risposta Stackoverflow di @Dave:

.

stopPropagation impedirà a qualsiasi handler Genitore dall'essere eseguito mentre stopImmediatePropagation farà lo stesso ma anche Impedire ad altri gestori dall'esecuzione.

Pertanto per risolvere il codice, tutto ciò che dobbiamo fare è scambiare quel metodo e voilà:

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

.

Ecco un ESEMPIO PLunker del codice di lavoro.Nell'esempio ho modificato leggermente la direttiva per consentire la specifica della direttiva per consentire specifiche eventi (come user-needed="submit") passando il valore direttamente alla funzione element.bind;Tuttavia, è predefinita per "click".