javascript - AngularJS - Why doesn't replace: true work with templateUrl property?

Question

I have a pretty simple directive that I want to load the template from a separate HTML file. I want the HTML to replace the directive and so I add the replace: true property to the directive. However when I do this, the template doesn't get included at all.

I've created a jsFiddle where you can see this. If you use Firebug or something to inspect the DOM, you can see that when it's using just the template property it does replace the element. If you take off the replace: true you can see the HTML at the templateUrl getting appended to the foo element. However, as soon as I add the replace: true with the templateUrl, all I see is <foo></foo> in the DOM.

Is there some reason you just can't use these two properties together? I'm far from an expert with javascript, so any information about what is going on here would be greatly appreciated.

Answer 1

Make sure the contents of your html in the templateUrl has exactly one root element. This is not an issue when replace: false but becomes an issue when replace: true and you will see this Console error (with FireBug):

Error: Template must have exactly one root element.

Here is a jsFiddle of it not working (with two root elements) and another with it working.