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

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

 My Directive Label


 

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 : "
 \
 My Directive Label \
 \
 \
 \
",....