Angular Fullcalendar无法使用Fullcalendary方法

Question

我在angularjs 1.6应用程序中使用angular fullcalendar。日历效果很好，整体运行良好。我使用的是一个自定义日期选择器指令，它将日期传递给Fullcalendar，但当我尝试在指令的JS中使用gotoDate方法时，我不断收到错误$(…(.Fullcalendar((不是一个函数。

我已经加载了jQuery(v3.2.1(、moment.js、angular-fullcalendar.min.js和fullcalendar.min.js(v3.9(。

我缺少了什么，使我无法使用.fullcalendar((方法？

index.html

<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/moment.js?"></script>
<link href="/Scripts/fullcalendar.min.css?" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/angular-fullcalendar.min.js?"></script>
<script type="text/javascript" src="/Scripts/fullcalendar.min.js?"></script>

app.js

let appModule = angular.module('Events',
[
EventsServices,
EventSheet,
'angular-fullcalendar'
]);

eventsheet.html

<div fc fc-options="calendarOptions" ng-if="selectedDate" ng-model="eventsArr" class="fullcalendar"></div>

事件表index.js

<script>
$scope.$watch('selectedDate', (date, oldDate) => {
if (!date || angular.equals(date, oldDate))
return;
if (date != 0 && date != oldDate) {
if ($ && $.length) {
$('.fullcalendar').fullCalendar('gotoDate', date);
}
}
});
</script>

Answer 1

原来角度完整日历不会将日历对象绑定到控制器。使用ui fullcalendar中的代码(我无法使用事件数组(，我将angular-fullcalendar.js更新为以下内容(见注释行(。

angular.module('angular-fullcalendar', [])
.constant('CALENDAR_DEFAULTS', { // *** New ***
calendars: {}
})
.value('CALENDAR_DEFAULTS', {
locale: 'en'
})
.directive('fc', ['CALENDAR_DEFAULTS', fcDirectiveFn]);
function fcDirectiveFn(CALENDAR_DEFAULTS) {
return {
restrict: 'A',
scope: {
eventSource: '=ngModel',
options: '=fcOptions'
},
link: function (scope, elm, attrs) { // *** added attrs ***
var calendar;
init();
scope.$watch('eventSource', watchDirective, true);
scope.$watch('options', watchDirective, true);
scope.$on('$destroy', function () {
destroy();
});
function init() {
if (!calendar) {
calendar = $(elm).html('');
}
calendar.fullCalendar(getOptions(scope.options));
if (attrs.calendar) { // *** New ***
CALENDAR_DEFAULTS.calendars[attrs.calendar] = calendar;
}
}
function destroy() {
if (calendar && calendar.fullCalendar) {
calendar.fullCalendar('destroy');
}
if (attrs.calendar) { // *** New ***
calendar = CALENDAR_DEFAULTS.calendars[attrs.calendar] = angular.element(elm).html('');
} else {
calendar = angular.element(elm).html('');
}
}
function getOptions(options) {
const event_source = scope.eventSource;
let isMultiSource = false;
Object.keys(event_source[0]).forEach(key => {
if (key === "events") {
isMultiSource = true;
}
})
if (isMultiSource) {
return angular.extend(CALENDAR_DEFAULTS, {
eventSources: event_source
}, options);
} else {
return angular.extend(CALENDAR_DEFAULTS, {
events: event_source
}, options);
}
}
function watchDirective(newOptions, oldOptions) {
if (newOptions !== oldOptions) {
destroy();
init();
} else if ((newOptions && angular.isUndefined(calendar))) {
init();
}
}
}
};
}

使用上面的JS，在控制器依赖项中包含CALENDAR_DEFAULTS。更新您的fullcalendardiv以包含日历值：

<div fc fc-options="calendarOptions" ng-model="eventsArray" calendar="myCalendar"></div>

现在，您可以针对您的日历并使用fullcalendar方法！

CALENDAR_DEFAULTS.calendars.myCalendar.fullCalendar('gotoDate', newDate);