2

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.
Improve this question

2 Answers 2

Reset to default
2

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().

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks blesh. Both of these solutions work but they're not ideal since the ng-click needs to know that it's in an isolated scope, when it really should be able to assume that it's in the parent. The solution that I'm looking for (if it exists!) is for everything inside my div to be in the parent scope.
@Roy, I'm not sure I agree... inside an ng-repeat, ng-view, ng-include, etc. you need to know that you are in a child scope. Similarly, when a custom directive is used, I think you need to know what kind of scope you are in (parent, child, isolate). The angular docs indicate which of the built-in directives create child scopes. Likewise, I think our custom directives will need to document what kind of scope they create (if any).
2

You can decide if this is "less sloppy" than transcluding:

<button ng-click="$parent.colorToggle()">Inside</button>

Isolate scopes have access to the parent scope via a $parent property. Although an isolate scope does not prototypically inherit from its parent scope, Angular still maintains a hierarchy via $parent and $$childHead and $$childTail.

Improve this answer

3 Comments

@blesh beat me by a few seconds
haha.. 8 seconds! I WIN! :P (I kid of course, as long as his question is answered)
Fair enough... maybe I won't read over my answer before I post it next time :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.