CODEWITHSUNDEEP
angularjs
Justin Diraviam
Justin Diraviam

Reputation: 1

Need to call parent function from nested directive angularjs

Below is my flow of application. I wanted to access the parent controller function from the child directive

<div ng-controller="ParentController">
    <first-directive></fist-directive>
</div>

in First Directive another directives loading

<div ng-controller="FirstController">
    <second-directive></second-directive>
</div>

from second-directive calling parent function

<div ng-controller="SecondController">
    <a ng-click="ParentFunction(2342)"></a>
</div>

ParentFunction() is available in Parent Controller. I wanted to call the function from second-directive.

ParentController-->FirstDirective-->SecondDirective

How to call the parent function from SecondDirective for my scenario?

Upvotes: 0

Views: 716

Answers (1)

madhur
madhur

Reputation: 1001

Make the first directive and second directive to inherit the parent scope(don't define scope property for them). If they are isolated scope then they can not access parent scope.

Then in the second directive do this -

<div ng-controller="SecondController">
    <a ng-click="$parent.$parent.ParentFunction(2342)"></a>
</div>

EDIT: If the directives have isolated scope as OP has commented here, then you have to pass the function to directive, so your code becomes like this

<div ng-controller="ParentController">
    <first-directive function-to-call="parentFunction()"></fist-directive>
</div>
<div ng-controller="FirstController">
    <second-directive function-to-call="functionToCall()"></fist-directive>
</div>
<div ng-controller="SecondController">
   <a ng-click="functionToCall(2342)"></a>
</div>

And the in the directive you have to have some values to scope like this

first Directive

scope: {
    functionToCall: '&'
}

Second Directive

scope: {
   functionToCall: '&'
}

Upvotes: 0

Related Questions