AngularJS - nested directives without transclude?
Accompanying plunker .
I have a custom attribute level directive in a div. The directive has an insulated scope. Inside my div, I have other directives that expect them to be in parent scope.
The problem is that the directives inside my div only have access to the isolated area, not the parent area . I understand why, but I do not understand how to solve this.
I know that I can use transclude to solve this problem (see plunker ), but it seems very sloppy. I have no need for a template, but I will only need to create one to get to work, and transclude is the only way to ensure that my nested directives have correct scope access.
Is there an alternative, cleaner way to do this?
To ask some possible questions:
- I am using attribute level directive instead of element level to simplify IE
- I use isolated scope because it is best practice - I don't want to accidentally bypass my parent scope and I want the directive to be portable.
source to share
I'm really not sure what you are trying to do.
But what you are actually doing is using bi-directional bindings in an isolated area for bad effect. This has almost nothing to do with your question.
Anyway ... here is an update to your plunker
Basically what happens inside your sandboxed directive, you need to use whatever name you assigned in the scope declaration, in this case toggleOn()
.
however, if you want you can do it . Mostly just call $parent.colorToggle()
.
source to share
You can decide if this is "less sloppy" than switching:
<button ng-click="$parent.colorToggle()">Inside</button>
Isolating scopes have access to the parent scopes using the property $parent
. Although the selection scope does not prototype inherit from the parent scope, Angular still maintains a hierarchy through $ parent and $$ childHead and $$ childTail.
source to share