javascript - AngularJS UI-calendar 持有对旧事件的引用

Question

我在 AngularJS 应用程序中使用 FullCalendar (angular-ui-calendar)。我使用 EventSources 数组传递事件:$scope.eventSources = [$scope.events]; 由 Controller 生成和更新 $scope.events。我的问题是每当我更新 $scope.events 时，FullCalendar 似乎都保留对旧事件的引用。

在 index.html 中:

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

我的 updateEvents 函数如下所示:

public updateEvents(newEvents) {
    // remove old events
    $scope.events.splice(0, $scope.events.length);

    // add new events using push
    for (var i = 0; i < newEvents.length; i++) {
        $scope.events.push(newEvents[i]);
    }
}

不幸的是，除非我明确调用从 EventSources 重新获取事件，否则上述函数不会删除旧事件:

$scope.myCalendar.fullCalendar('refetchEvents');

我发现了一个类似的问题 ( AngularJS UI-calendar not updating events on Calendar )，Studio4Development 的回答似乎最相关。但是，我认为我通过使用 push 和 splice 来维护相同的数组实例。

Answer 1

我通过跟踪库代码设法弄清楚了为什么会发生这种情况，结果才意识到我使用 Bower 安装的 angular-ui-calendar 已经过时了。出于某种原因，Bower 默认安装版本 0.8.1，而 0.9.0-beta.1 是与 fullCalendar v2 兼容所必需的。我无法在 plnkr 中重现此问题，因为 plnkr 默认提供 fullCalendar 1.6，它与旧版本的 angular-ui-calendar 兼容。

特别是函数

eventsWatcher.onRemoved = function(event) {
      scope.calendar.fullCalendar('removeEvents', function(e) { 
          return e === event; 
      });
};

已更新为

eventsWatcher.onRemoved = function(event) {
    scope.calendar.fullCalendar('removeEvents', function(e) { 
        return e._id === event._id;
    });
};

由于 fullCalendar v2 向每个事件(例如 momentJS 对象)添加了一些字段，因此旧函数会向 fullCalendar 传递一个不匹配任何内容的过滤器。

TL;博士

angular-ui-calendar 没有引用旧事件。相反，它没有正确删除事件。更新到最新的测试版可解决此问题。