CODEWITHSUNDEEP
angularjs
Roy Truelove
Roy Truelove

Reputation: 22456

AngularJS - nested directives without transclude?

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:

Upvotes: 2

Views: 1756

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364677

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.

Upvotes: 2

Ben Lesh
Ben Lesh

Reputation: 108471

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

Upvotes: 2

Related Questions