Question

我正在尝试包含角度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"/>

包含在应用中的依赖

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文件中存在一些问题。在init和destroy方法中，他们使用angular.element方法创建组件，但如果我用jQuery更改它，它就解决了这个问题。

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

角度日历集成无法加载

2 个答案: