Fullcalendar 日历最初不使用 Angular 呈现

Question

我正在为 Fullcalendar 实现 ui-calendar 指令。它应该显示日历，然后可以 select 编辑日期。但是，虽然日历的选项卡显示得很好，但在单击其中一个选项卡之前，日历本身不会呈现。

此时，可以 select 将日期正确传回父级。但是，重新打开日历后，它又一次未呈现，并且一旦呈现，selection 就不会突出显示。

此时，这是包含日历配置的 Angular 指令的代码：

    angular.module('app.directives')
    .directive('calendar', ['_', function(_) {
        return {
            restrict: 'A',
            scope:
            {
                date: '=',      // Date in any format Moment accepts
                select: '&'
            },
            templateUrl: 'partials/directives/calendar.html',
            controller: ['$scope', '$translate', 'uiCalendarConfig', function($scope, $translate, uiCalendarConfig)
            {
                var dayKeys = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'];
                var dayNamesShort = [];
                var dayNamesLong = [];
                _.each(dayKeys, function (dayKey){
                    dayNamesShort.push($translate.instant(dayKey + '.short'));
                    dayNamesLong.push($translate.instant(dayKey + '.long'));
                });

                var monthKeys = ['jan', 'feb', 'mar', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
                var monthNamesShort = [];
                var monthNamesLong = [];
                _.each(monthKeys, function (monthKey){
                    monthNamesShort.push($translate.instant(monthKey + '.short'));
                    monthNamesLong.push($translate.instant(monthKey + '.long'));
                });


                $scope.events = [];
                $scope.calendarConfig = {
                        header: {
                            left: 'prev title next',
                            center: '',
                            right: 'today'
                        },
                        defaultDate: $scope.date,
                        selectable: true,
                        editable: true,
                        firstDay: 1,
                        monthNames: monthNamesLong,
                        monthNamesShort: monthNamesShort,
                        dayNames: dayNamesLong,
                        dayNamesShort: dayNamesShort,
                        dayClick: function (date)
                        {
                            $scope.select({date: date});
                        }
                };
            }]
        };
    }]);

这是包含指令的 HTML： - 日历本身：

    <div ui-calendar="calendarConfig" ng-model="events"></div>

包含日历的div：

    <div ng-click="openSidePanel()">
<ng-transclude></ng-transclude>
<div side-panel opened="sidePanelOpen">
    <div header-panel back="back()" done="done()" title-key="{{titleKey}}">
        <div calendar date="initialDate" select="select(date)"></div>
    </div>
</div>

这里还有一个问题询问如何访问 Fullcalendar 对象，即这个问题：Accessing fullcalendar object in Angular ui-calendar

我尝试这样做是为了调用 Fullcalendar 的 'render' 方法，但到目前为止，文档和上述问题的解决方案都只有 return 未定义。

谁能看出这段代码有什么问题，并解释一下为什么日历最初没有显示？

有关更多信息，当我尝试使用 ui-calendar 文档中建议的方法时，我将指令名称从 'calendar' 更改为 'datePicker' 以避免命名冲突。我也在相关 HTML 中反映了这一变化。这样做不会改变日历的行为，任何对 uiCalendarConfig 或 $scope.calendar（我的日历属性的名称）的调用都会导致它们未定义。

编辑：This 用户报告了一个类似的问题，可以通过引入超时来解决。但是，为了执行此操作，需要访问 uiCalendarConfig，并且到目前为止，该对象在我当前的设置中仍未定义。如果有人可以指导我如何解决该问题，我将不胜感激。谢谢！

Answer 1

进一步搜索发现我们这边的bower设置有问题。它们被设置为 1.0.0，这应该是最后一个版本，但将其设置为 'latest' 下载了文件 calendar.js 的最新版本，这解决了 uiCalendarConfig 未定义的问题。

解决了这个问题后，我使用了问题本身中提到的超时解决方案来正确呈现日历。

Fullcalendar 日历最初不使用 Angular 呈现

Fullcalendar calendar does not initially render using Angular

calendar

fullcalendar

angularjs