javascript - AngularJS UI 日历保留对旧事件的引用

Question

我在 AngularJS 应用程序中使用 FullCalendar (angular-ui-calendar)。我使用 EventSources 数组传递事件: $scope.eventSources = [$scope.events]; ，其中 $scope.events 由 Controller 生成和更新。我的麻烦是每当我更新 $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 的答案似乎最相关。但是，我认为我通过使用推送和拼接来维护相同的数组实例。

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 传递一个不匹配任何内容的过滤器，因为 fulLCalendar v2 向每个事件添加了一些字段(例如，一个 momentJS 对象)。

TL;博士

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