Angular Bootstrap日歷默認模板未加載

Question

我正在通過https://github.com/mattlewis92/angular-bootstrap-calendar#installation使用角度引導日歷

我看不到像這樣的日歷模板

角度控制器是

 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> 

像這樣綁定控制器

 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 () { }); } 

頁面上沒有錯誤，但是模板沒有加載，我不確定模板的放置位置，項目約定不是使用html文件而是返回剃刀視圖，因此我什至嘗試在calendarConfig中提供url .templates，但是在實際加載模板之前調用獲取模板內容的代碼。

我不確定該插件是否做錯了什么，但是如果有人可以解釋模板的加載方式，那將很棒。

謝謝！

Answer 1

模板只是沒有加載，js要求您將模板加載到templatecache中，我使用模板內容將其放入模板緩存中以顯示它們