Nested directive element doesn't compile

Question

I'm looking for some help with the nested AngularJS directives:

For example, I've defined a set of custom directive elements including container and item. I arrange them as so:

<container>
  <item />
  <item />
  <item />
</container>

Then define each one. You can see from the attached jsFiddle, that the compile functions aren't being called for the nested items, but when the item element is moved out of the container, they are (indicating there's nothing wrong with the compile functions per-se.

Why aren't the nested directives triggering a compile event?

This is loosely based on this example from the Angular homepage:

http://jsfiddle.net/vankirkc/HpHeW/

I can't work out why their children are parsing correctly and mine are not.

Josh David Miller · Accepted Answer · 2013-01-10 02:26:33Z

1

When you use transclusion, you have to add the ng-transclude directive to one of your template elements. If you change the group directive's template to this:

template: '<div ng-transclude></div>',

All will work.

PS: Your directive declaration syntax is overly verbose for what you're doing, but it's technically correct.

answered Jan 10, 2013 at 2:26

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

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

1 Comment

Christopher Van Kirk Over a year ago

Thanks Josh, that worked a treat. As to the verbosity of the directive definitions, I'm fairly new to AngularJS so I'm including everything until I get a handle on what's available and what it all means.

Collectives™ on Stack Overflow

Nested directive element doesn't compile

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related