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.
Make sure the contents of your html in the
templateUrlhas exactly one root element. This is not an issue whenreplace: falsebut becomes an issue whenreplace: trueand you will see this Console error (with FireBug):Here is a jsFiddle of it not working (with two root elements) and another with it working.