AngularJS verwendet eine Direktive, um die Ausführung anderer Direktiven zu verhindern

Question

Für einige Aktionen in meiner Angular-App muss der Benutzer registriert sein.Wenn der Benutzer nicht registriert ist, möchten wir ein „Registrierungsmodal“ anzeigen und die ursprüngliche Aktion verhindern.

Diese Aktionen können über ng-click oder jede andere „Click-Binding“-Anweisung (zum Beispiel die „modal-toggle“-Anweisung) ausgelöst werden.

Also habe ich diese Lösung gefunden: https://stackoverflow.com/a/16211108/2719044

Das ist ziemlich cool, funktioniert aber nur mit ng-click.

Ich wollte zunächst die Eigenschaft „terminal“ der Direktive dynamisch machen, habe es aber nicht geschafft.

Die Idee bestand also darin, „terminal“ auf „true“ zu setzen und die standardmäßige Klickaktion in der Direktive manuell zu verhindern.

Hier ist mein 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> 

Und meine Direktive(n) (die nicht funktionieren...)

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

...Und deshalb bin ich hier.Irgendeine Idee ?

Vielen Dank.

Answer 1

Du warst sehr nah dran.Anstelle von stopPropagation brauchten Sie stopSofortVermehrung.Der Unterschied zwischen den beiden ist in zusammengefasst diese StackOverflow-Antwort von @Dave:

stopPropagation wird jegliches verhindern Elternteil Handler, wenn sie ausgeführt werden stopImmediatePropagation werde das Gleiche tun aber auch Verhindern Sie die Ausführung anderer Handler.

Um den Code zu reparieren, müssen wir also nur diese Methode austauschen und voilà:

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

Hier ist ein Beispiel Plunker des Arbeitscodes.Im Beispiel habe ich die Direktive leicht geändert, um die Angabe bestimmter Ereignisse zu ermöglichen (z. B user-needed="submit"), indem Sie den Wert direkt an übergeben element.bind Funktion;Die Standardeinstellung ist jedoch „Klicken“.