处理角度指令之间的交互以进行身份​​验证

I have two directives, for the sake of simplicity I have reduced my problem to the following:

我有两个指令,为了简单起见,我将问题减少到以下几点:

Directive 01 : handles authentication

指令01:处理身份验证

it is responsible for opening modals / windows and getting user authenticated.

它负责打开模态/窗口并获得用户身份验证。

angular
.module('app.directives')
.directive('requiresLogin', function(){       
     return {
         restrict : 'A',
         link : function() { //..}
     }
})

Directive 02 : performs specific action

指令02:执行特定操作

angular
.module('app.directives')
.directive('like', function(){

     return {
         restrict : 'A',
         link : function() { //..}
     }
})

Both directive 01 and 02 bind click events.

指令01和02都绑定了点击事件。

I am bit confused about the design of two directives.

我对两个指令的设计感到有点困惑。

I could make the second directive a child of the first one and get communication between the directive, which to some extent makes sense as the single responsibility of each directive is maintained under this pattern. However all my future directives that would need authentication will be children of the first directive.

我可以使第二个指令成为第一个指令的子指令,并在指令之间进行通信,这在某种程度上是有意义的,因为在这种模式下维护每个指令的单一责任。但是,我需要认证的所有未来指令都将是第一个指令的子代。

My Question is :

我的问题是:

How can prevent the second directive (actual action) based on the result of first "authenticating" directive ? Is there any other way of doing this without making a "parent-child" relation between them ?

如何根据第一个“身份验证”指令的结果来阻止第二个指令(实际操作)?如果不在它们之间建立“亲子关系”,还有其他方法吗?

2 个解决方案

#1

Only add the "action" directive and inject an auth service to it:

只添加“action”指令并为其注入auth服务:

http://jsfiddle.net/coma/dby686ab/

Logic

app.factory('user', function() {

    var roles = ['user'];

    return {
        hasRole: function(role) {

            return !role || roles.indexOf(role) > -1;
        }
    };
});

app.directive('like', function(user) {

    return {
        restrict: 'A',
        link    : function(scope, element, attrs) {

            element.on('click', function () {

                if (user.hasRole(attrs.authRole)) {

                    element.addClass('liked');
                    element.off('click');

                } else {

                    alert('Unauthorized.');
                }
            });
        }
    };
});

View

<a like="">Dogs</a>
<a like="" auth-role="user">Birds</a>
<a like="" auth-role="admin">Whales</a>

#2

You can use "require" definitly well explained in the following post :

您可以在以下帖子中明确解释使用“require”:

How to require a controller in an angularjs directive

如何在angularjs指令中要求控制器

In your context you could do:

在您的上下文中,您可以:

.directive('requirelogin', function() {
    return {
        scope: true,
        controller: function() {
            var isLogged = false;

            this.isLogged = function() {
                if(isLogged) return isLogged; 
                alert("You are not logged!");
            };

            this.login = function(){
                isLogged = true;            
            };
        }
    };
})

.directive('like', function() {
    return {
        scope: true,
        require: '^requirelogin',
        link: function(scope, element, attrs, loginCtrl) {
            scope.loginCtrl = loginCtrl;
            scope.sayILike = function(){
                if(scope.loginCtrl.isLogged()){
                    alert('I like');
                }
            };

            scope.login = function(){
                scope.loginCtrl.login();
            };
        }
    };
});

Working : http://jsfiddle.net/bennekrouf/nq9g33Lt/25/

工作:http://jsfiddle.net/bennekrouf/nq9g33Lt/25/