Question

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

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

我尝试将其设置为将事件数据添加（或删除）到事件数组（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 ...定义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;
});

Answer 1

没有人会回答这个非常复杂的问题。你有一些错别字：用“;”，“]”错过了收盘... 什么是'函数calFactory'？什么是'$ broadcast'？为什么要把'$'引用JavaScript对象？这意味着“私有变体”吗？ “if（！no_broadcast）......”不是编码，而是评论。

Answer 2

在＆＃34; $ scope.entry。$ save（function（）{＆＃34;，为什么输入没有＆＃39; $＆＃39;，但范围和保存有它？

Answer 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动态添加或删除事件（＆＃39; removeEvents＆＃39;或＆＃39; renderEvent＆＃39;）!!

以下是我更改代码的方法。

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

使用Angular Resource $ save保存事件时刷新FullCalendar

3 个答案: