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.
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/