angularJs custom directive not working with templateUrl

Question

I am new to AngularJs. I am writing my custom angular directive which contains a template of some html content. When I use the template with the below code it works fine.

demoApp.directive('demoCarousel', function() {
  return {
    restrict: 'E',
    replace:'true',
    template: "<h1>This is from the custom directive..</h1>"
  };

});

But when I replace the template with templateUrl pointing to a html inside a partial I am getting error.

demoApp.directive('demoCarousel', function() {
  return {
    restrict: 'E',
    replace:'true',
    templateUrl: "/partials/carousel.html"
 };

});

The javascript error is something like:

Error: [$compile:tplrt] http://errors.angularjs.org/1.2.15/$compile/tplrt?p0=glassCarousel&p1=%2Fpartials%2Fcarousel.html

Please let me know where I am going wrong and what the correct way to use the templateUrl

Note: I am using only pure html code inside the carousel.html file.

Solution

The error sais: Template for directive 'glassCarousel' must have exactly one root element. /partials/carousel.html

this means that you have something like this in your template:

<div>...</div>
<div>...</div>

It is not allowed, you should have one root element:

<div>
    <div>...</div>
    <div>...</div>
</div>

Comments

[Pradeep]

Thanks a lot. This saved me a lot of time.

[Sydwell]

+1 A must if you using an external file, as an alternative to the ui-bootstrap examples that use templateUrl that calls code in the "index.html"