Angular Bootstrap日历默认模板未加载

Question

I'm using angular bootstrap calendar by https://github.com/mattlewis92/angular-bootstrap-calendar#installation

I am not able to see the calendar template it looks like this

angular controller is

 module app.calendar.controllers { import angularCalendar = angular.bootstrap.calendar; export class calendarSample1Controller //implements angular.bootstrap.calendar.events.IOnEditEventClick { calendarTitle: string; calendarView: string = "month"; viewDate: Date = new Date(); events: Array<angularCalendar.IEvent>; isCellOpen: boolean = true; customTemplateUrls: string[]; constructor(private calendarConfig: angularCalendar.ICalendarConfig, private $templateCache: ng.ITemplateCacheService, private $http: ng.IHttpService) { $templateCache.get('calendar.html'); this.getEvents(); } private getEvents() { //TODO get all the events from service this.events = [ { title: 'An event', color: this.calendarConfig.colorTypes.hearings, startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(), endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(), draggable: false, resizable: false, }, { title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title', color: this.calendarConfig.colorTypes.holidays, startsAt: moment().subtract(1, 'day').toDate(), endsAt: moment().add(5, 'days').toDate(), draggable: false, resizable: false, }, { title: 'This is a really long event title that occurs on every year', color: this.calendarConfig.colorTypes.inspections, startsAt: moment().startOf('day').add(7, 'hours').toDate(), endsAt: moment().startOf('day').add(19, 'hours').toDate(), recursOn: 'year', draggable: false, resizable: false, } ]; } eventClicked(calendarEvent: angularCalendar.IEvent): void { console.log("clicked"); }; } } and the view I am using is this 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <h1>Calendar sample 1</h1> <div ng-controller="calendarController as vm"> <h2 class="text-center">{{ vm.calendarTitle }}</h2> <div class="row"> <div class="col-md-6 text-center"> <div class="btn-group"> <button class="btn btn-primary" mwl-date-modifier date="vm.viewDate" decrement="vm.calendarView"> Previous </button> <button class="btn btn-default" mwl-date-modifier date="vm.viewDate" set-to-today> Today </button> <button class="btn btn-primary" mwl-date-modifier date="vm.viewDate" increment="vm.calendarView"> Next </button> </div> </div> <br class="visible-xs visible-sm"> <div class="col-md-6 text-center"> <div class="btn-group"> <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label> <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label> <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label> <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label> </div> </div> </div> <br> <mwl-calendar events="vm.events" view="vm.calendarView" view-title="vm.calendarTitle" view-date="vm.viewDate" on-event-click="vm.eventClicked(calendarEvent)" on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" cell-is-open="vm.isCellOpen" day-view-start="06:00" day-view-end="22:59" day-view-split="30" cell-modifier="vm.modifyCell(calendarCell)"> </mwl-calendar> </div> 

The controller is bound like this

 module app.calendar { "use strict"; import calendarSample1Controller = app.calendar.controllers.calendarSample1Controller ; import angularCalendar = angular.bootstrap.calendar; angular.module("app.calendar", ['mwl.calendar', 'ui.bootstrap','ngAnimate',]) .controller("calendarController", ["calendarConfig", "$templateCache", '$http', calendarSample1Controller]) .config(function () { }); } 

There are no errors on the page but the template isn't loading, I'm not sure where to place the templates, the project convention is not to use html files but to return razor views so I even attempted to give urls in the calendarConfig.templates but the code to get the template content gets called before the templates are actually loaded.

I'm not sure if I'm doing something wrong with this plugin, but if someone can explain how the templates are loaded that would be great.

Thanks!

Answer 1

模板只是没有加载，js要求您将模板加载到templatecache中，我使用模板内容将其放入模板缓存中以显示它们