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

我正在使用Angular UI日历在日历上显示一些事件.事件在日历上显示正常.但是,当我更新任何事件的细节时,事件的细节实际上已被修改,但在日历显示上未被修改(例如：start).

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

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

如何确保事件在日历上也被修改,没有重新加载页面？

我试过calendar.fullCalendar(‘render’);从DB获取新的条目后,但并不解决问题.

以下是一些代码：

最初我这样做是将数据发送到DB,然后重新加载页面来检索更新的数据.
$http.put(URL,的SendData).success(功能(数据){$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



          }

        });

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

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

而不是做：

$scope.events = []

尝试：

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

然后当您的服务器请求返回时,将每个项目单独添加到现有阵列中：

for(var i = 0; i $scope.events.push(newEvents [I]);
}

我建议这样做的原因是因为你所描述的声音听起来像日历可能会持续到旧的事件列表.日历可能不知道更新其引用,因此,让它保持相同的引用,但更改数组的内容.

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

猜你在找的Angularjs相关文章