Template for directive must have exactly one root element

[engbmsdev]

Hi, I'm trying to add ionic-calendar in my Ionic App, but when I include one calendar in HTML I have the following error:

[$compile:tplrt] Template for directive 'calendar' must have exactly one root element. templates/rcalendar/calendar.html

I'm also trying to remove all templateCache functions and use real HTML templates but nothing change.

The only way to run ionic-calendar correctly is remove all templateUrl and copy all templates HTML in template attribute.

Any ideas?

Thank you very much

[twinssbc]

@engbmsdev Could you provide your html file that declares the calendar directive?

[engbmsdev]

@twinssbc

This is my HTML view:

<div class="month-panel">
     <calendar calendar-mode="calendar.mode" starting-day-month="calendar.startingDay" show-event-detail="calendar.eventList">
</div>

While in the the controller I have:

$scope.calendar = {
     mode        : "month",
     startingDay : (moment().weekday() - 1),
     eventList   : false
};

Thank you for your help.

[twinssbc]

@engbmsdev Are you trying to modify the calendar-tpls.js? Did you put any comment in that file? According to the Google result, it seems comment itself will also be treated as a root element.

[engbmsdev]

@twinssbc No, I'm trying to use it without any modifications, but when it starts to give me some errors I've tried to resolve them making little edits. I've read about comments on Google results but I didn't edit templates or calendar-tpls.js. :(

[twinssbc]

OK. Which calendar version and Ionic version are you using? Are you referencing calendar-tpls.js? Are you using templateCache elsewhere?

[engbmsdev]

I'm using Ionic v.1.3.1 and ionic-calendar v.0.2.7; calendar-tpls.js is linked in my index.html file and yes, I'm using $templateCache in all my templates with gulp-angular-templatecache.

[twinssbc]

@engbmsdev Any chance you can debug your application to see what's stored in the templateCache for the 'templates/rcalendar/calendar.html'?

[lucasdoamaral]

Hi, @engbmsdev! Did you include ui.rCalendar in your app.js file?

[engbmsdev]

Resolved! I'm using a http interceptor and in its response function I return reponse.data instead response; now I return response for http template requests and response.data for all API request.

bbottema comment in AngularJS issue

Thanks for your support!