AngularJS UI日历不会更新日历上的事件

Question

我正在使用Angular UI-Calendar在日历上显示一些事件.这些事件在日历上显示正常.但是当我更新任何事件的细节时,事件的细节实际上被修改,但没有在日历显示上修改(例如:开始).

最初,在我修改了事件的细节之后,我做了一个页面重新加载来显示修改后的更改,它也工作了.在那个方法中,我有一个空$scope.events = [];数组,我在从DB中检索条目后填充.

但现在,我想避免重新加载该页面.因此,一旦从模态窗口修改了事件的细节,我清除了$scope.events数组的内容$scope.events = [];然后使用API​​调用,我再次在$scope.events数组中填充新事件.这是正常工作,因为列表视图显示修改后的事件详细信息.但日历本身显示旧条目.例如,如果我start从4月11日改为4月13日,则日历显示4月11日的事件,而列表视图显示修改后的数据,即4月13日.使用页面重新加载,更正此事件即在修改日期(4月13日)显示事件.

如何在没有页面重新加载的情况下确保在日历上修改事件？

我calendar.fullCalendar('render');从DB中获取新条目后尝试过,但它没有解决问题.

以下是一些代码:

最初我这样做是为了将数据发送到DB,然后重新加载页面以检索更新的数据. $http.put(url,senddata).success(function(data){$window.location.reload();});

现在我想避免页面重新加载,所以我做了

        $http.put(url,senddata).success(function(data){//$window.location.reload();//sends modified data to server
        $scope.events = [];  //clear events array

   $http.get(url2).success(function(data){  //fetch new events from server, and push in array
  $scope.schedule = data;
          for(var i=0;i<data.length;i++)
          {
            $scope.events.push({
      idx: data[i].idx,
      title: data[i].title,
      description : data[i].description,
      allDay: false,
      start: new Date(data[i].start), 
      end:  new Date(data[i].end),

      });


     calendar.fullCalendar('render'); //Tried even this, didn't work



          }

        });

上面的代码将event数组中的已修改事件推送到列表视图中可见,但日历仍显示旧事件,直到重新加载页面.

Answer 1

尝试维护相同的数组实例.

而不是做:

$scope.events = []

尝试:

$scope.events.slice(0, $scope.events.length);

然后,当您的服务器请求返回时,将每个项目分别添加到现有阵列:

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

我之所以建议这是因为您所描述的内容听起来像日历可能会保留在旧的事件列表中.日历可能不知道更新其引用,因此,让它保持相同的引用,但更改数组的内容.

Answer 2

只是快速修正Studio4Development的答案.你应该使用"拼接"而不是"切片".切片返回修剪过的数组.我们想要做的是实际改变原始数组.所以你可以使用:

$scope.events.splice(0, $scope.events.length)

并添加新事件:

$scope.events.push(newEvent)

Answer 3

如您所知，完整日历依赖于 JQuery。因此，您所需要做的就是在您的日历上添加一个 ID，如下所示：

<div id="calendar" ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>

然后当你想更新日历时只需调用：

$('#calendar').fullCalendar('refetchEvents')

我也为此苦苦挣扎了一段时间，这解决了我所有的问题。我希望这也能帮助你！

祝你好运！