CODEWITHSUNDEEP
javascriptscopeangularjs
dnc253
dnc253

Reputation: 40337

Why is there an extra scope in between my parent and child directives?

I have a directive which then as part of its template uses an inner directive. When a certain thing happens in my inner directive, I want to call a function in the scope of the parent directive. I thought the '&' for the scope property on the directive was for this kind of scenario. However, when I try to call the function, the function in the parent directive never gets called. See the jsFiddle here: http://jsfiddle.net/hdm3Q/

When debugging, I found that $parent on the scope of the inner directive was not the same as the scope of the parent directive. It wasn't until I did scope.$parent.$parent that I found the scope for the outer directive. So, why is this extra scope here? How can I call the function on my parent scope. I'd really like to have isolated scope in these directives. Any help on this would be much appreciated.

Upvotes: 1

Views: 69

Answers (1)

Tosh
Tosh

Reputation: 36030

Name translation between parentFunction and parent-function is happening.

In your directive, you should use hyphenated version of the name. This rule applies to all the angular html attributes.

<div child parent-function="parentFunction()"></div>

working fiddle: http://jsfiddle.net/p2dtC/

Upvotes: 1

Related Questions