Angularjs 使用角资源$save保存事件时刷新FullCalendar

我正以这个例子为灵感构建一个日历，并添加$save以使用RESTful服务器连接添加新事件

我正在试图找到一种方法，使日历在保存新事件时显示这些事件，而无需手动刷新浏览器

我的尝试是将事件数据添加（或删除）到事件数组（gDataService.events）。虽然它确实会更改数组的内容，但更改不会显示在日历中。（例如，如果我更改活动日期，活动将不会移动到新日期。）

有人能给我指出正确的方向吗？谢谢

HTML

控制器2。。。定义eventSource的主控制器

myApp.controller("MainCtrl", function($scope,$compile,uiCalendarConfig, calFactory,eventFactory, gDataService) {

gDataService.events = function(start, end, callback) {
    var d = new Date(start);
    var events;

    events = calFactory.query({
      start: start,
      end: end
    });

    events.$promise.then(function(value){
        gDataService.events = events;
      //have to call the callback as well to keep the calendar happy
        callback(gDataService.events);
        $scope.statusTxt = $scope.statusTxt  + " ... Event loading completed at " + moment(new Date()).format("HH:mm:ss");
        }
    );
};
/* event sources array*/
$scope.eventSources = [gDataService.events];  /*, $scope.eventSource, $scope.eventsF*/
})

工厂

myApp.factory("calFactory",['$resource','$filter', function($resource, $filter) {

    return $resource("/griddata/", {}, {
        get: {
            method: 'GET'
        },
        save: {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
            transformRequest: function(data, headersGetter) {
                data = angular.toJson(data); 
                data = $.parseJSON(data);
                return $.param(data.data);
            }
        }
    });

}]))

gDataService。。。这将存储事件数据并使其可用于程序的其他部分

myApp.factory("gDataService", function ($rootScope, calFactory) {
var service = {};
service.events = [];

service.addData = function(object, no_broadcast) {

    this.events.push({
        __id: object.task_id, title: object.task, start: object.duedates,
        backgroundColor: bColor, textColor: bTextColor, borderColor: bColor
    });

    if (!no_broadcast) {$rootScope.$broadcast("gDataUpdated")};
};

service.removeData = function(task_id, no_broadcast) {

    var arr_index = _.findIndex(this.events, {'__id': task_id});

    this.events.splice(arr_index, 1);

    if (!no_broadcast) {$rootScope.$broadcast("gDataUpdated")};
};
return service;
});

---

没有人会回答这个复杂的问题。 您有一些拼写错误： 以“；”，“]”结束时错过。。。 “功能calFactory”的内部是什么？什么是“$broadcast”？ 为什么要将“$”放在JavaScript对象的前面？这是“私有变量”的意思吗？ “if（！no_broadcast）…”不是编码，而是注释。

在“$scope.entry.$save（function（）{”中，

---

为什么条目没有“$”，而scope和save有“$”？

下面是chris rock的答案

将calendar.js中的scope.init更改如下：

scope.init = function(){
  calendar.fullCalendar(options);
  window.calendar = calendar;  /// This is the key
};

现在我可以使用window.calendar.fullCalendar（'removeEvents'或'renderEvent'）动态添加或删除事件了

下面是我如何更改代码的

gDataService

 service.addData = function(object, no_broadcast) {
    //add additional project
    this.added_event = {
        __id: object.task_id, title: object.task, start: object.duedates,
        backgroundColor: bColor, textColor: bTextColor, borderColor: bColor
    }; 
    this.events.push(this.added_event);

    if (!no_broadcast) {$rootScope.$broadcast("gDataUpdated")};
};

service.removeData = function(_id, no_broadcast) {
    var arr_index = _.findIndex(this.events, {'_id': _id});
    this.delete_id = _id;
    this.events.splice(arr_index, 1);

    if (!no_broadcast) {$rootScope.$broadcast("gDataUpdated")};
};
return service;

控制器

$scope.$on('gDataUpdated', function(){
    if (gDataService.delete_id) {
        window.calendar.fullCalendar('removeEvents',gDataService.delete_id); // This removes this event from the calendar
        gDataService.delete_id = null;
    };
    if (gDataService.added_event) {          
        window.calendar.fullCalendar('renderEvent',gDataService.added_event,false); // This adds this event to the calendar
        gDataService.added_event = null;
    }; 

 service.addData = function(object, no_broadcast) {
    //add additional project
    this.added_event = {
        __id: object.task_id, title: object.task, start: object.duedates,
        backgroundColor: bColor, textColor: bTextColor, borderColor: bColor
    }; 
    this.events.push(this.added_event);

    if (!no_broadcast) {$rootScope.$broadcast("gDataUpdated")};
};

service.removeData = function(_id, no_broadcast) {
    var arr_index = _.findIndex(this.events, {'_id': _id});
    this.delete_id = _id;
    this.events.splice(arr_index, 1);

    if (!no_broadcast) {$rootScope.$broadcast("gDataUpdated")};
};
return service;

$scope.$on('gDataUpdated', function(){
    if (gDataService.delete_id) {
        window.calendar.fullCalendar('removeEvents',gDataService.delete_id); // This removes this event from the calendar
        gDataService.delete_id = null;
    };
    if (gDataService.added_event) {          
        window.calendar.fullCalendar('renderEvent',gDataService.added_event,false); // This adds this event to the calendar
        gDataService.added_event = null;
    };