使用 Angular 资源 $save 保存事件时刷新 FullCalendar答案

【问题标题】：Refreshing FullCalendar upon saving events with Angular Resource $save使用 Angular 资源 $save 保存事件时刷新 FullCalendar
【发布时间】：2015-01-15 14:13:35
【问题描述】：

我正在构建一个受此示例启发的日历 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>

Controller1 ... 这会保存新事件。

    $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.');
        });

    };

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

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

【问题讨论】：

标签： angularjs fullcalendar factory

【解决方案1】：

没有人会回答这个非常复杂的问题。你有一些错别字：错过以“;”、“]”结束... 'function calFactory'里面有什么？什么是“$广播”？为什么你把'$'放在 JavaScript 对象前面？这是“私有变量”的意思吗？ “if (!no_broadcast) ...”不是编码，而是评论。

【讨论】：

【解决方案2】：

在"$scope.entry.$save(function(){", 为什么 entry 没有'$'，但是 scope 和 save 有？

【讨论】：

【解决方案3】：

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

在 calendar.js 中更改了 scope.init，如下所示：

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

现在我可以使用 window.calendar.fullCalendar('removeEvents' or '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;
    };

【讨论】：