Angular ui-calendar (FullCalendar) 未绑定到范围事件

Question

在使用 Angular 和 FullCalendar（通过 angular-ui-calendar 项目）时，我似乎无法使事件绑定正常工作。

硬编码事件时：

    $scope.events = [
        {
            title: 'Event1',
            start: '2016-03-04'
        }
    ];
    $scope.eventSources = {
        events: $scope.events,
        color: '#999',
        textColor: 'black'
    };

一切正常。

但是，由于该页面包含事件过滤器，因此我需要能够随时修改它们。这样做时，日历上的任何内容都不会被修改。

我尝试了许多不同的方法，并阅读了 angular-ui-calendar 和 fullCalendar 文档，但找不到任何关于绑定无法立即使用的线索。

当我这样做时（使用超时只是为了简化问题，请考虑使用 Ajax 请求）：

    $scope.events = [];
    $scope.eventSources = {
        events: $scope.events,
        color: '#999',
        textColor: 'black'
    };
    $timeout(function() {
      $scope.events = [
        {
            title: 'Event1',
            start: '2016-03-04'
        }
      ];
   },1000);

日历中没有添加任何内容。 我尝试使用

在 fullCalendar 元素上调用刷新方法

uiCalendarConfig.calendars.myCalendar.fullCalendar('rerenderEvents');
//also tried - uiCalendarConfig.calendars.myCalendar.fullCalendar('refetchEvents');
//also tried - uiCalendarConfig.calendars.myCalendar.fullCalendar('render');

（uiCalendarConfig 已正确注入控制器）。

我也尝试使用$scope.$apply() 包装代码，但没有成功。

我之前直接通过 javascript/jQuery API 使用 fullCalendar 并且效果很好，angular-ui-calendar 文档指出“ui-calendar 指令与 ng-model 配合得很好。”但到目前为止，它只是痛苦。

我的实际 HTML 标签是

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

控制台中没有任何错误。

关于如何解决这个问题以及为什么事件绑定不是人们想象的直接方法的任何想法？

Answer 1

事件在日历小部件初始化期间绑定。 这就是为什么如果您希望动态更新它的唯一机会，当您拥有生成事件所需的所有信息等时，您必须初始化小部件。 例如，您可以做的是将您的小部件放入

<div ng-if="widgetConfigLoaded">...</div>

在设置配置后将 widgetConfigLoaded 设置为 true

你也可以尝试，但可能不会因为我刚才说的薄而不是

$timeout(function() {
      $scope.events = [
        {
            title: 'Event1',
            start: '2016-03-04'
        }
      ];
   },1000);

你可以试试

 $timeout(function() {
      $scope.events.push(
        {
            title: 'Event1',
            start: '2016-03-04'
        }
      );
   },1000);

因为您所做的是用新数组覆盖 $scope.events。这个新数组与您之前链接到配置的 $scope.events 无关。配置里面仍然有一个空数组。

为了更清楚地考虑以下代码：

var a = [];
var b = a;
a = [1,2,3];

你希望 b 是什么？它当然是一个空数组。

Answer 2

为了将新的/更新的/删除的事件应用到日历，我必须重新加载整个事件渲染。

    function formulateSources() {
        console.log('formulating sources',events);
        $scope.eventSources = [events];
        if(uiCalendarConfig.calendars.myCalendar) {
            uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
            uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', events);
        }
    }

Answer 3

你离得更近了一点。

$scope.events = [
    {
        title: 'Event1',
        start: '2016-03-04'
    }
];

在您的日历配置中设置此事件。

events: $scope.events,