2014-09-09 6 views
1

У меня есть две директивы, для простоты я сократил мою проблему к следующему:обработка взаимодействия между угловыми директивами для аутентификации

Директива 01: выполняет проверку подлинности

он отвечает за открытие модальности/windows и получить аутентификацию пользователя.

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

Директива 02: выполняет определенное действие

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

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

И ДИРЕКТИВА 01 и 02 связывают события нажатия.

Я немного смущен о дизайне двух директив.

Я мог бы сделать вторую директиву ребенка от первого и получить связь между директивой, которая в какой-то степени имеет смысл в качестве единственной ответственности каждой директивы поддерживается в этот шаблон. Однако все мои будущие директивы, которые нуждаются в аутентификации , будут дочерними элементами первой директивы.

Мой вопрос:

Как предотвратить вторую директиву (фактическое действие) на основании результата первой директивы «проверки подлинности»? Есть ли другой способ сделать это, не создавая отношения «родитель-ребенок» между ними?

+0

К сожалению, вы нашли мой ответ полезен? – coma

ответ

0

добавить только "действие" директивы и ввести сервис аутентификации к нему:

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.'); 
       } 
      }); 
     } 
    }; 
}); 

Посмотреть

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

Вы можете использовать "требуют" определенно хорошо объяснено в следующем сообщении:

How to require a controller in an angularjs directive

В вашем контексте вы могли бы сделать:

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

работы: http://jsfiddle.net/bennekrouf/nq9g33Lt/25/

+0

ok ... есть какое-то объяснение для этого downvote? разделение контроллера между двумя директивами полезно для того, чтобы сказать, что это зависит от другого. – benek

+0

Не могли бы вы разработать свой ответ немного больше? – coma

+0

Спасибо, намного лучше сейчас. – coma

Смежные вопросы