CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
paulcpederson
paulcpederson

Reputation: 1447

In nested Angular directives, can the child directive inherit a variable from parent's isolated scope?

Let me explain what I'm trying to do. I would like to have the following html:

<outer data="variableFromAppController">
  <inner></inner>
</outer>

variableFromAppController is a variable on my main application's controller scope. I know I can pass that through to the directive like this:

.directive('outer', [function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      data: '='
    }
  }
}]);

Passing the data attribute through to an isolated scope works great! But my problem is, I'd like my inner directive to also be aware of this data on the parent directive's scope too.

If the inner directive has no scope declared, it inherits the scope of the app controller, not the outer directive. Is there a way for me to inherit this isolated scope? Or even just access it and watch "data" for changes?

Upvotes: 3

Views: 2169

Answers (2)

SomeoneHelpful
SomeoneHelpful

Reputation: 86

If you want your inner directive scope to have access to the parent scope, then instead of declaring an isolate scope on your directive, try declaring the scope to use prototypical scope inheritance. You can do this by specifying "scope: true". 

app.directive('inner', function(){
     return {
     restrict: 'E',
     replace: true,
     scope: true,
     link: function(scope){
            console.log(scope.data)
          }
      } 
});

Upvotes: 2

javaCity
javaCity

Reputation: 4318

Yes! Just put transclude: true in your parent directive and manually pass the scope in the transclude function in your link function of parent. Here's a basic plnkr.

app.directive('outer', function(){
   return {
    restrict: 'E',
    replace: true,
    scope: {
      data: '='
    },
    transclude: true,
    link: function(scope, elem, attr, nullCtrl, transclude){
        transclude(scope, function(clone){
            elem.append(clone);
        });
    }
  } 

});


app.directive('inner', function(){
   return {
    restrict: 'E',
    replace: true,
    link: function(scope){
        console.log(scope.data)
    }
  } 
});

Upvotes: 4

Related Questions