AngularJS използва директива, за да предотврати изпълнението на други директиви

Някои действия в моето приложение Angular изискват потребителят да бъде регистриран. Ако потребителят не е регистриран, искаме да покажем „Модална регистрация“ и да предотвратим първоначалното действие.

Тези действия могат да бъдат задействани чрез ng-click или всяка друга директива за „обвързване с щракване“ (например тази „modal-toggle“).

Така че намерих това решение: https://stackoverflow.com/a/16211108/2719044

Това е доста готино, но работи само с ng-click.

Първо исках да направя свойството "терминал" на директивата динамично, но не успях да го направя.

Така че идеята беше да се зададе "терминал" на истина и ръчно да се предотврати действието при щракване по подразбиране в директивата.

Ето го моят 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>

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

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

...И затова съм тук. Някаква идея ?

Благодаря много.


terminal angularjs directive stoppropagation
person Maslow    schedule 14.04.2014    source източник
comment
трябва да разгледате проекта на angular-app, който обработва удостоверяването по най-добрия начин, който намерих от сега: github.com/angular-app/angular-app (вижте модула за сигурност)   -  person Jscti    schedule 14.04.2014
comment
Това изглежда не решава проблема ми. Нямам нужда от обща функция за удостоверяване.   -  person Maslow    schedule 15.04.2014
comment
не е. можете да изберете маршрут по маршрут, ако искате да ограничите достъпа (вижте resolve възел, когато дефинирате нов маршрут). И това ограничение може да бъде нормален потребител/администратор.. Но не е нужно да приемате техния модел ;) това е просто много добър пример за това какво може да се направи.   -  person Jscti    schedule 15.04.2014
comment
Друго нещо, начинът, по който искате да ограничите страниците си чрез събития onclick, не може да бъде сигурен. Не връзките трябва да защитите, а маршрутът   -  person Jscti    schedule 15.04.2014
comment
Всичките ми действия не са маршрути. Понякога става въпрос само за показване или не на модал. И да, не може да бъде сигурно, но в моя случай не е важно. Формата в модала вече е защитена, но действието за показване на модала не е необходимо да бъде. Просто искам да хвана щракването и да тествам чрез директива дали потребителят е удостоверен. Ако не, не показвам модала и пренасочвам към формата за вход. Не знам дали съм ясен.   -  person Maslow    schedule 15.04.2014
comment
съжалявам за късния отговор, но се сблъсквам с подобен проблем (както във вашето заглавие), разреших конкретния проблем, който имате, използвайки персонализирана директива за ng-permission, която скрива елемента, ако потребителят няма разрешение за това действие.   -  person harishr    schedule 19.12.2014
comment
Не съм сигурен, че разбирам въпроса. Бихте ли отговорили на няколко въпроса? Разбирам, че искате ‹div first.one›‹/div› да показва, ако потребителят не е регистриран, и да показва ‹div second.one›‹/div›, ако потребителят Е регистриран, или обратното. Това истина ли е?   -  person SoEzPz    schedule 06.01.2015

Отговори (1)


arrow_upward
3
arrow_downward

Бяхте изключително близки. Вместо stopPropagation ви трябваше stopImmediatePropagation. Разликата между двете е обобщена в този отговор на StackOverflow от @Dave:

stopPropagation ще попречи на всички родителски манипулатори да бъдат изпълнени, докато stopImmediatePropagation ще направи същото, но също така ще предотврати изпълнението на други манипулатори.

Така че, за да коригираме кода, всичко, което трябва да направим, е да разменим този метод и Voilà:

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

Ето примерен Plunker на работния код. В примера модифицирах леко директивата, за да позволя специфични събития да бъдат уточнявани (като user-needed="submit") чрез предаване на стойността директно на функцията element.bind; обаче по подразбиране е „щракване“.

person Jonathan Gawrych    schedule 13.02.2016