使用角度资源$save保存事件时刷新完整日历

Question

我正在构建一个受此示例启发的日历 http://plnkr.co/edit/pIDltQRV6TQGD4KQYnj7?p=preview 并添加$save以使用 RESTful 服务器连接添加新事件。

我正在尝试找到一种方法，使日历在$saved新事件时显示新事件，而无需手动刷新浏览器。

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

有人可以指出我正确的方向吗？谢谢！

.HTML

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

控制器1 ...这将保存新事件。

    $scope.ok = function () {
        $scope.entry = new calFactory();
        $scope.entry.data = data
        $scope.entry.$save( function(){
        // data saved. do something here.
            toaster.pop('success','Message','Update successfully completed.');
        });
    };

控制器2 ...定义事件源的主控制器

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);
            }
        }
    });

}]）;

g数据服务 ...这将存储事件数据，并使其可用于程序的其他部分

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;
});

Answer 1

没有人会回答这个更复杂的问题。您有一些错别字：错过了以";"、"]"结束..."函数计算器工厂"里面有什么？什么是"$broadcast"？为什么你把'$'放在JavaScript对象的前面？这是指"私有变量"吗？"如果（！no_broadcast）..."不是编码，而是评论。

Answer 2

在 "$scope.entry.$save（ function（）{"，为什么条目没有"$"，但范围和保存有它？

Answer 3

这是

chris-rock https://github.com/angular-ui/ui-calendar/issues/200 的答案。

更改了日历中的 scope.init.js如下所示：

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;
    };