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

Question

我正在使用 Angular UI-Calendar 在日历上显示一些事件。事件在日历上显示良好。但是当我更新任何事件的详细信息时，事件的详细信息实际上被修改了，但没有在日历显示上修改(例如:开始)。

最初，在我修改了事件的详细信息后，我重新加载了页面以显示修改后的更改并且它也起作用了。在那种方法中，我有空 $scope.events = [];数组，我从数据库检索条目后填充。

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

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

我试过 calendar.fullCalendar('render');从数据库获取新条目后，但并没有解决问题。

这里有一些代码:

最初我这样做是为了将数据发送到数据库，然后重新加载页面以检索更新的数据。$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 中推送修改事件数组在 ListView 中可见，但日历仍显示旧事件，直到页面重新加载。

Answer 1

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

而不是做:
$scope.events = []
尝试:
$scope.events.slice(0, $scope.events.length);
然后当您的服务器请求返回时，将每个项目单独添加到现有数组中:
for(var i = 0; i < newEvents.length; ++i) {
$scope.events.push(newEvents[i]);
}
我建议这样做的原因是因为您所描述的内容听起来像是日历可能会保留旧的事件列表。日历可能不知道更新它的引用，所以相反，让它保持相同的引用但更改数组的内容。