角度日历集成无法加载

Question

我正在尝试包括Angular UI-Calendar组件。我跟随该网站的步骤1. https://github.com/angular-ui/ui-calendar和2. http://www.oodlestechnologies.com/blogs/fullcalendar-walk-through-with-angularjs

通过

安装了组件

bower install angular-ui-calendar

HTML文件中加载的组件

<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>

将依赖性纳入app

var app = angular.module('myCalendarApp', ['ui.calendar'])

在UI中插入

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>

在控制器中创建的静态事件和配置

$scope.eventSources = [];
$scope.uiConfig = {
    calendar:{
        height: 450,
        editable: true,
        header:{
            left: 'month basicWeek basicDay agendaWeek agendaDay',
            center: 'title',
            right: 'today prev,next'
        },
        eventClick: $scope.eventClick
    }
};      
$scope.eventClick = function(event){ 
    alert("Clicked event === "+event.title);
};
var events = [
    {title: 'All Day Event',start: new Date('Sun Dec 17 2017 09:00:00 GMT+0530 (IST)')},
    {title: 'Long Event',start: new Date('Thu Dec 21 2017 10:00:00 GMT+0530 (IST)'),end: new Date('Thu Dec 21 2017 17:00:00 GMT+0530 (IST)')},
    {id: 999,title: 'Repeating Event',start: new Date('Mon Dec 4 2017 09:00:00 GMT+0530 (IST)'),allDay: false}
];
$scope.eventSources = [events];

当我尝试在浏览器中验证日历时，它将抛出以下错误

TypeError: calendar.fullCalendar is not a function
at Scope.scope.initCalendar (calendar.js:286)
at Object.fn (calendar.js:358)
at Scope.$digest (angular.js:15896)
at Scope.$apply (angular.js:16160)
at WindowsCtrl.window.showDialog.$scope.showDialog (controller.js:690)
at HTMLSpanElement.onclick (VM4670 windows:1)

有人可以帮我解决这个问题。

Answer 1

您需要包括所有依赖项并将其从HTML

接线

<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>

Answer 2

谢谢您每个提出建议解决问题的人。

我解决了这个问题。Angular-UI-Calendar/src/calendar.js文件中存在一些问题。在初始化和破坏方法中，他们正在使用Angular.Element方法创建组件，但是如果我使用jQuery更改它，则可以解决该问题。

参考：https：//github.com/angular-ui/ui-calendar/issues/267