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.

karaxuna · Accepted Answer · 2014-04-29 07:26:28Z

8

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>

answered Apr 29, 2014 at 7:26

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pradeep Over a year ago

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

Sydwell Over a year ago

+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"

Collectives™ on Stack Overflow

angularJs custom directive not working with templateUrl

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related