Access parent directive $scope

Question

I have two directives a wrapper with common values and a inner directive, in the controller i have a object element

in the template i have

<div wrapper="element">
  <div inner="name"></div>
  <div inner="lastname"></div>
</div>

Example: I want bind element.name property from inner directive, inner directive its a complex widget

i trying to access to element from inner through wrapper, how i can achieve it?

wrapper directive

{
  scope: {
    wrapper: '='
  }
}

inner directive

{
  require: '^wrapper',
  scope: {
    inner: '@'  
  }
}

in the inner directive template

<input type="text" ng-model="$parent.wrapper[inner]" />

Not working!

Note: i dont want set for each inner directive the model, Example

<div wrapper="element">
  <div inner="name" model="element.name"></div>
  <div inner="lastname" model="element.lastname"></div>
</div>

You get 'wrapper's directive with $parent, right. So what doesn't work exactly? Why do you want to access inner through wrapper if inner is already the current scope? — MMM
– MMM, Commented Sep 14, 2014 at 1:26
currently i have to pass many properties to inner and all inners have the same properties i want wraps and use a common directive — rkmax
– rkmax, Commented Sep 14, 2014 at 1:29

Khanh TO · Accepted Answer · 2014-09-14 01:31:30Z

1

$parent may not work correctly in case there are any intermediate scope created by ng-repeat, ng-include,...

The correct way is to use require:

In your parent, define a controller:

{
  scope: {
    wrapper: '='
  },
  controller: function ($scope) {
     this.scope = $scope;
  }
}

In your inner directive:

{
  require: "^wrapper",
  scope: {
    inner: '@'  
  },
  link: function (scope, element, attrs, wrapperController){
     scope.wrapperScope = wrapperController.scope;
  }
}

in the inner directive template

<input type="text" ng-model="wrapperScope.wrapper[inner]" />

answered Sep 14, 2014 at 1:31

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rkmax Over a year ago

controller: function($scope) { this.scope = $scope } did the trick

Collectives™ on Stack Overflow

Access parent directive $scope

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related