1

I have the following markup:

<div parent="john">
   <div child>Child 1 </div>
   <div child>Child 2</div>
</div>

And the following child directive:

angular.module("app").directive("child", child);

function child($parse) {
  var child = {
    link: link,
    replace: false,
    restrict: "A"
  };
  return child;
  function link(scope, element, attributes) {
  }
}

How can I create a Parent directive (where a value is set, for example, John) and on Child directive access the parent value?

Miguel Moura
  • 36,732
  • 85
  • 259
  • 481
  • check this http://stackoverflow.com/questions/20212354/angularjs-accessing-parent-directive-properties-from-child-directives?rq=1 – Murwa Apr 21 '16 at 09:09

2 Answers2

0

Use isolate scope to define a two-way binding for your child directive. Reference: AngularJS directive guide.

An isolate scope is defined in the child as:

return {
   scope: {
       attName: '='
   },
   // ... others
};

Use the child as: <div child att-name="parentVar"></div>.

The value parentVar is an value on the parent's scope. When this value is changed in the parent, the value will be propagated into the child by Angular.

======================

Upon request, here is an example: JSFiddle

Joy
  • 9,430
  • 11
  • 44
  • 95
  • Sorry, not sure what you are saying. Could you, please, give me a more full example? Thank you. – Miguel Moura Apr 21 '16 at 08:53
  • I would prefer to not set the att-name at child level because the value will always be the one in parent. And I can have many childs ... So a change in parent would force me to change all code. I really want child to work only when parent exists and the value is always taken from parent – Miguel Moura Apr 21 '16 at 10:42
  • Actually i do not get what you mean from the comment. This answer is for what you asked in the question. Probably you want to explore more options of the directives. I believe there is some solution for your scenarios. – Joy Apr 21 '16 at 11:18
  • I tried to follow your example but I still get the value undefined on child. Could you, please, take a look at my example: http://jsfiddle.net/puLoaz93/. What am I missing? – Miguel Moura Apr 21 '16 at 14:19
  • Why not you compare yours and mine? – Joy Apr 22 '16 at 00:50
  • From your code, I guess you may be a freshman to Angular. I suggest you to follow some tutorials and write more code. You will get used to it very soon. – Joy Apr 22 '16 at 00:52
0

You can require the directive, and then access to the parent controller:

angular.module("app").directive("child", child);

function child($parse) {
  var child = {
    require: '^parent',
    link: link,
    replace: false,
    restrict: "A"
  };
  return child;
  function link(scope, element, attributes, parentCtrl) {
    //Here you have access to the parent controller
  }
}
Kobi Cohen
  • 678
  • 4
  • 9
  • I tried that but wasn't able to make it work. Could you take a look at my online example? http://jsfiddle.net/puLoaz93/ – Miguel Moura Apr 21 '16 at 14:20