La direttiva personalizzata angularJs non funziona con templateUrl

Question

Sono nuovo su AngularJs. Sto scrivendo la mia direttiva angolare personalizzata che contiene un modello di alcuni contenuti html. Quando uso il modello con il codice seguente funziona perfettamente.

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

});

Ma quando sostituisco il modello con templateUrl che punta a un html all'interno di un partial sto ricevendo errore.

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

});

L'errore javascript è qualcosa di simile:

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

Si prega di farmi sapere dove sto andando male e che il modo corretto di utilizzare il TemplateURL

Nota: io sto usando solo puro codice HTML all'interno il file carousel.html.

Answer 1

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

questo significa che avete qualcosa di simile nel modello:

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

Non è consentito, si dovrebbe avere un solo elemento radice:

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