当 $scope.events 通过 Factory 填充时，Angular UI-Calendar AddEvent 不起作用

问题描述

如本 plunkr 示例所示，当事件直接附加到 $scope.events 时，可以添加并显示新事件.但是，如果我通过 factory.events 更新 $scope.events，则新事件不会显示在日历上.

As shown in this plunkr example, a new event can be added and displayed when the event is appended to $scope.events directly. However, if I update $scope.events through factory.events, the new event is not displayed on the calendar.

http://plnkr.co/edit/BkdzJJ?p=preview

这一定是我遗漏的非常简单的事情，但我已经为这个问题苦苦挣扎了几个星期.你能帮忙吗?

This has to be something really simple that I'm missing, but I've been struggling with this issue for weeks now. Can you please help?

app = angular.module('myApp');

function CalendarCtrl ($scope, gDataService) {
var today = new Date();
var m = today.getMonth();
var y = today.getFullYear();
var date = new Date();
var d = date.getDate();

$scope.events2 = [];  // This gets data through gDataService
$scope.events3 = [];  // This gets data directly from addEvent_direct method in this controller

// This is how I attempted to populate $scope.events2
$scope.$on('gDataUpdated', function(){
  //alert(gDataService.events2.length);

  $scope.events2 = gDataService.events2;
  alert('gDataService # of events =' + gDataService.events2.length.toString()
  + '; $scope.events2 includes '+ $scope.events2.length.toString());
  // The alert message indicates $scope.events is properly updated based on
  // gDataService.events2, but the new event doesn't appear on the calendar.
});

// This is how $scope.events3 is successfully populated
$scope.addEvent_direct = function() {

    var today = new Date();
    var m = today.getMonth();
    var y = today.getFullYear();
    var d = today.getDate();
    object = { title: 'Event directly added',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        className: ['openSesame']}
    $scope.events3.push(object);
}

// both events2 and events3 are included as eventSources
$scope.eventSources = [ $scope.events2 ,$scope.events3];

$scope.uiConfig = {
    fullCalendar: {
        height: 550,
        editable: false
    }
};
}
CalendarCtrl.$inject = [ '$scope','gDataService'];

//这是从另一个控制器(ButtonCtrl)获取 event2 数据的工厂

// This is the factory that gets event2 data from another controller (ButtonCtrl)

app.factory("gDataService", function ($rootScope) {
var service = {};
service.events = [];
service.events2 = [];
service.added_event_short = {start: null, title: null};

service.addData = function(object) {

  this.events2.push(object);
  //alert(this.events2.length);
  $rootScope.$broadcast("gDataUpdated");
};

return service;
});

//这是一个与CalendarCtrl分离的控制器，用于测试不同控制器如何通过工厂共享数据

//This is a controller separated from CalendarCtrl in order to test how different controllers can share data through factory

app.controller('ButtonCtrl', function($scope,gDataService) {

  $scope.addEvent = function() {

    var today = new Date();
    var m = today.getMonth();
    var y = today.getFullYear();
    var d = today.getDate();
    object = { title: 'Open Sesame',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        className: ['openSesame']}

  gDataService.addData(object);
}
});

推荐答案

使用这个:

  //$scope.events2 = gDataService.events2; //replace with below
  angular.forEach(gDataService.events2, function(event) {
    console.log(event);
    $scope.events2.push(event);
  });

原因是，你在view中使用了'$scope.events2'来绑定数据，但是你在update的时候用新的数据替换了js对象.然后上一个对象的监视不起作用.

The reason is, you use '$scope.events2' to bind the data in view, but you replace the js object with new data during update. Then the watch on previous object doesn't work.

这篇关于当 $scope.events 通过 Factory 填充时，Angular UI-Calendar AddEvent 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！