Question

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

http://jsfiddle.net/vankirkc/ezN3M/28/

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.

Answer 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.