Question

Accompanying plunker.

I have an attribute-level custom directive in a div. The directive has an isolated scope. Inside my div I have other directives that expect to be in the scope of the parent.

The issue is that the directives inside my div have access only to the isolated scope, not to the parent scope. I understand why, but I’m not clear on how to solve it cleanly.

I know that I can use transclude to solve this (see plunker) but this feels very sloppy. I have no need for a template, but I’d have to create one just for transclude to work, and transclude seems to be the only way to ensure that my nested directives have access to the correct scope.

Is there an alternative, cleaner way to do this?

To head off some possible questions:

• I’m using an attribute-level directive instead of an element-level to make things easier for IE
• I’m using an isolated scope because it’s a best practice – I don’t want to hose my parent scope by accident, and I want the directive to be portable.

Answer 1

I’m really not sure what you’re trying to do.

But what you’re actually doing is leveraging bidirectional binds on an isolated scope for ill-effect. It almost seems unrelated to your question.

Anyhow… here is an update to your plunker

Basically what was happening is inside of your isolated directive you need to use whatever name you’ve assigned in your scope declaration, in this case toggleOn().

however if you want to you can do this. Basically just call $parent.colorToggle().