Template must have exactly one root element with custom directive replace: true

Question

I am having issues with a custom directive with replace: true,

http://jsbin.com/OtARocO/2/edit

As far as I can tell, I do only have one root element, my , what i

Answer 1

This error could also occur with an incorrect url to a (non-existing) template. See https://stackoverflow.com/a/34284646/430885

Answer 2

Seems to be a known bug of AngularJs.

What you could do is to change the restriction to attribute instead of element, remove the tbody from the template and use a <tbody custom ng-repeat="item in items"> in your html code.

Basically:

Your template becomes:

<tr><td>{{ item.name }}</td></tr>
<tr><td>row2</td></tr>

Your directive:

return {
  restrict: 'A',
  templateUrl: 'lineItem.html',
  link: function(scope, element, attrs) {

  }
};

And your HTML :

<div data-ng-controller="MyCtrl">
  <table>
    <tbody custom data-ng-repeat="item in items"></tbody>
  </table>
</div>

Answer 3

Make sure that all the html elements that will be echoed/written to the page, have been wrapped in an envelop. i.e if my template will write a form input that has a label,input[text] and a span. Remember to wrap everything in a div.

i.e

<div>
<label> My Directive Label</label>
<input type='text' ng-model='xyz' />
<span ng-class='errors'></span>
</div> <!-- the root element , the element that envelops everything-->

Another Error you may receive may be "Unterminated string object" which means that the template string has not been terminated properly - to solve this just include a backlash character "\" at the end of each line break i.e

.
.
replace:true,
restrict:'ACE',
template : "<div> \
<label> My Directive Label</label> \
<input type='text' ng-model='xyz' /> \
<span ng-class='errors'></span> \
</div> \
",....

Answer 4

Watch out with comments in directive templates as well! docs

Watch out for html comments at the beginning or end of templates, as these can cause this error as well. Consider the following template:

<div class='container'> 
 <div class='wrapper>
 ...
 </div> <!-- wrapper -->
</div> <!-- container -->

The <!-- container --> comment is interpreted as a second root element and causes the template to be invalid.