在 Angular JS 中渲染后，angular-ui/ui-calendar 更改事件源答案

【问题标题】：angular-ui/ui-calendar change event source after render in Angular JS在 Angular JS 中渲染后，angular-ui/ui-calendar 更改事件源
【发布时间】：2014-12-27 16:05:02
【问题描述】：

我正在尝试在我的 Angular Js 应用程序中使用 angular-ui/ui-calendar(FullCalendar)。我有一个选择框，其中列出了一些项目，根据选择的项目，我的事件源 URL 需要更新。所以在控制器中，我确实更新了它，但是日历仍然没有使用更新的 URL，而且我需要日历来刷新/渲染，一旦源被更改。根据这个link 需要一些删除和添加事件源。我是 Jquery 和 Angular 的新手，所以如果有人能解释我如何在 Angular js 中做到这一点，我将不胜感激。

我在控制器的某些部分设置了 url 源，但我认为这不是正确的做法，而且它也不起作用。

$scope.locationId = 0
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
        url : $scope.url
    };

$scope.setURL = function(locationId) {
    $scope.locationId = locationId
    $scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
    $scope.eventSource = {
        url : $scope.url
    };
    $scope.eventSources = [ $scope.eventSource ];
}

【问题讨论】：

标签： angularjs fullcalendar angular-ui

【解决方案1】：

不使用 refetchEvents，下面的代码对我有用。添加新事件源后，日历会自动从新源获取新数据。

// This function is called to change the event source. When
// ever user selects some source in the UI
$scope.setEventSource = function(locationId) {
// remove the event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEventSource', $scope.eventSource);
// Create the new event source url
$scope.eventSource = {url : "./api/ev/event/calendarByLocationId?locationId=" + locationId};
// add the new event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);
}

【讨论】：

【解决方案2】：

我也在考虑添加和删除事件源。好像有问题。

但我暂时拥有的是一个 REST url。一旦更新，数据就会更新。到那时，我让程序通过触发这个来刷新同一个 url 上的事件。这使得 url 可以被刷新并再次从数据库中获取。

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

您的 HTML 代码应如下所示：

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

希望这会有所帮助。

【讨论】：