Accessing parent isolated scope in directive I was looking for a way to markup parts of my app as restricted to only certain roles, on an element basis.

This works quite well, using an attribute directive, where I specify the allowed roles and disable/hide the corresponding element; e.g. 

&lt;input require-role="admin" /&gt;


In order to make the app more maintainable I thought about inheriting the the required role attribute, e.g.

&lt;form&gt;
    &lt;div required-role="Admin"&gt;              &lt;!-- Set:       'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input /&gt;                            &lt;!-- No role checking  --&gt;
        &lt;div required-role="User"&gt;           &lt;!-- Overwrite: 'User' --&gt;
            &lt;input required-role/&gt;           &lt;!-- Inherit:   'User' --&gt;
        &lt;/div&gt;
    &lt;/div&gt;                                 
    &lt;div required-role="Admin User"&gt;         &lt;!-- Set:   'Admin User' --&gt;         
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
        &lt;input required-role="Admin"/&gt;       &lt;!-- Overwrite: 'Admin' --&gt;
    &lt;/div&gt;
    &lt;button required-role="Admin"&gt;Save&lt;/button&gt;
    &lt;button required-role="User"&gt;Send to review&lt;/button&gt;
&lt;/form&gt;


What I came up with is the following directive, that recursively searches in the isolatedScope of the parent element until it eventually finds the requiredRole property:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope){
  $scope.name = 'World';
});
app.directive('requireRole', function(){
  var getRequiredRoleFromParent = function(element){
    var par = element.parent();
    if (!par) return;
    var is = par.isolateScope();
    if (is &amp;&amp; is.requireRole) return is.requireRole;
    return getRequiredRoleFromParent(par);
  };
  return {
    restrict: 'A',
    scope   : {
      requireRole: '@'
    },
    link    : function(scope, element){
      var labelClass = "label-success";
      if (!scope.requireRole) {
        scope.requireRole = getRequiredRoleFromParent(element);
        labelClass = "label-info";
      }
      element.prepend('&lt;span class="label ' + labelClass + ' "&gt;' + scope.requireRole + '&lt;/span&gt;');
    }
  }
});


I am happy with the solution I came up with, yet my experience developing directives is limited; maybe there are better ways to achieve the same behavior?

Plunkr can be found here
In your HTML


  &lt;form&gt;
      &lt;div required-role="Admin"&gt;              &lt;!-- Set:       'Admin' --&gt;
          &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
          &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
          &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
          &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
          &lt;input /&gt;                            &lt;!-- No role checking  --&gt;
          &lt;div required-role="User"&gt;           &lt;!-- Overwrite: 'User' --&gt;
              &lt;input required-role/&gt;           &lt;!-- Inherit:   'User' --&gt;
          &lt;/div&gt;
      &lt;/div&gt;                                 
      &lt;div required-role="Admin User"&gt;         &lt;!-- Set:   'Admin User' --&gt;         
          &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
          &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
          &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
          &lt;input required-role="Admin"/&gt;       &lt;!-- Overwrite: 'Admin' --&gt;
      &lt;/div&gt;
      &lt;button required-role="Admin"&gt;Save&lt;/button&gt;
      &lt;button required-role="User"&gt;Send to review&lt;/button&gt;
  &lt;/form&gt;



You create a div just to inherit from it, this is bad practice, unless there is more than one element inside that div that is going to inherit from the div

in the second group of code you actually do it the right way, not sure why you were inconsistent with the first block.

you should write it like this

&lt;form&gt;
    &lt;div required-role="Admin"&gt;              &lt;!-- Set:       'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin' --&gt;
        &lt;input /&gt;                            &lt;!-- No role checking  --&gt;
        &lt;input required-role="User"/&gt;        &lt;!-- Inherit:   'User' --&gt;
    &lt;/div&gt;                                 
    &lt;div required-role="Admin User"&gt;         &lt;!-- Set:   'Admin User' --&gt;         
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
        &lt;input required-role/&gt;               &lt;!-- Inherit:   'Admin User' --&gt;
        &lt;input required-role="Admin"/&gt;       &lt;!-- Overwrite: 'Admin' --&gt;
    &lt;/div&gt;
    &lt;button required-role="Admin"&gt;Save&lt;/button&gt;
    &lt;button required-role="User"&gt;Send to review&lt;/button&gt;
&lt;/form&gt;


I also assume that this is Example HTML as you don't give any of those input tags ID's  which makes them unusable.



In your Javascript


  var getRequiredRoleFromParent = function(element){
      var par = element.parent();
      if (!par) return;
      var is = par.isolateScope();
      if (is &amp;&amp; is.requireRole) return is.requireRole;
      return getRequiredRoleFromParent(par);
  };



You could take the negative check out of there, it doesn't make sense that way, instead perform a positive check, if it's true then you can perform what is after that.

The "after that" stuff should be changed to a ternary statement, it looks cleaner to me and it is equivalent.  It is slightly nested but it shows the flow of the code brightly.

var getRequiredRoleFromParent = function(element){
    var par = element.parent();
    if (par) {
        var is = par.isolateScope();
        return (is &amp;&amp; is.requireRole)
            ? is.requireRole
            : getRequiredRoleFromParent(par);
    }
};


The Recursion of this function looks good, I don't see an issue with the recursive nature of this function.