AngularJs custom directive does not work with templateUrl

Question

I am new to AngularJs. I am writing my own angular directive which contains a template for some html content. When I use the template with the code below, 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 templateUrl template pointing to the html inside the partial, I get an error.

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

});

A 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 wrong and what is the correct way to use templateUrl

Note. I use only clean html code inside the carousel.html file.

Answer 1

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

this means there is something like this in your template:

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

Not allowed, you must have one root element:

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