我在 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 的答案似乎最相关。但是,我认为我通过使用推送和拼接来维护相同的数组实例。
最佳答案
我通过跟踪库代码设法弄清楚了为什么会发生这种情况,却发现我使用 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 没有引用旧事件。相反,它没有正确删除事件。更新到最新的测试版可以解决此问题。
关于javascript - AngularJS UI 日历保留对旧事件的引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26739900/