Problem replacing the content of a directive with a template that has 2 tags that are not nested

[carpasse]

You can see an exaple of the bug in http://jsfiddle.net/carpasse/q3sRH/2/

The main difference between the two directives are their templates.

The first directive 'accordionTab' has this template:

       template:'<div>'+
                       <h3 class="accordionTitle"><a href="#">{{title}}</a></h3>' +
                 '<div ng-transclude></div></div>' 

and the second directive has this template:
template:'

{{title}}

' +
'

'

and if I use the second directive the code doesn´t get injected inside the

The issue is that when you do replace, you have to make sure that you replace with the same number of elements.
The ng-transclude happens to be on the second element, which does not get compiled.

[pkozlowski-opensource]

In 1.0.3 the error message is very explicit indicating that the template must have one root only. Running the following jsFiddle (updated to 1.0.3, http://jsfiddle.net/aEK98/2/) we are going to get:

Template must have exactly one root element. was: <h3 class="accordionTitle"><a href="#">{{title}}</a></h3><div ng-transclude></div>

So, yes, at the moment templates must have one root element and hopefully the error message will make it easier for people to notice this / avoid too much time spent wondering what is going on. Closing for now.

[alexspurling]

What is the reason for the restriction to a single root element? The error message is helpful in letting you know what the problem but it doesn't explain why it occurs. Should we expect this to ever be fixed or not?

[metrofun]

+1 I really don't like those extra tags, when using Angular. Sometimes this nesting prevents me from using CSS3 selectors like adjacent selector, last-child etc

[petebacondarwin]

@metrofun - it is quite tricky for Angular to keep track of nodes when compiling and replacing them. Having a single root node makes it much easier. It is likely that in AngularJS 2.0 there will be more control over how we can transform the DOM (templates and transclusion) between the source DOM and the compiled DOM but this will be quite a major rewrite of the compiler, which is not likely to happen in v1.x.