CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
rkmax
rkmax

Reputation: 18125

Access parent directive $scope

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>

Upvotes: 0

Views: 38

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

$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]" />

Upvotes: 1

Related Questions