AngularJS использует директиву для предотвращения выполнения других директив

Question

Некоторые действия в моем приложении Angular требуют, чтобы пользователь был зарегистрирован.Если пользователь не зарегистрирован, мы хотим показать "Модальную регистрацию" и предотвратить первоначальное действие.

Эти действия могут быть запущены с помощью ng-click или любой другой директивы "привязки щелчка" (например, директивы "modal-toggle").

Итак, я нашел это решение: https://stackoverflow.com/a/16211108/2719044

Это довольно круто, но работает только с ng-click.

Сначала я хотел сделать свойство "terminal" директивы динамическим, но не смог этого сделать.

Итак, идея состояла в том, чтобы установить для "terminal" значение true и вручную запретить действие click по умолчанию в директиве.

Вот мой ДОМ.

<!-- 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> 

И мои директивы (которые не работают ...)

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

..И именно поэтому я здесь.Есть какие - нибудь идеи ?

Большое спасибо.

Answer 1

Вы были очень близки.Вместо остановки распространения вам нужна была остановкаНемедленныйРазмножение.Разница между этими двумя понятиями суммируется в этот ответ StackOverflow автор @Dave:

stopPropagation предотвратит любые родитель обработчики от выполнения во время stopImmediatePropagation сделаю то же самое но также запретить выполнение других обработчиков.

Итак, чтобы исправить код, все, что нам нужно сделать, это заменить этот метод и вуаля:

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

Вот пример пример Плунжера из рабочего кода.В приведенном примере я немного изменил директиву, чтобы разрешить указывать конкретные события (например, user-needed="submit") путем передачи значения непосредственно в element.bind функция;однако по умолчанию используется значение "click".