当$ scope.events通过填充厂UI角，日历的addEvent不工作 [英] Angular UI-Calendar AddEvent doesn't work when $scope.events is populated through Factory

问题描述

如本plunkr示例中所示，可以添加和显示一个新的事件时，该事件被直接scope.events追加到$。不过，如果我通过factory.events更新$ scope.events，不显示在日历的新事件。

http://plnkr.co/edit/BkdzJJ?p=$p$ PVIEW

这已经是很简单的东西，我很想念，但我一直在这个问题了几个星期，现在挣扎。你能帮帮？

 应用程序= angular.module（'对myApp'）;功能CalendarCtrl（$范围，gDataService）{
VAR今天=新的Date（）;
变种M = today.getMonth（）;
变种Y = today.getFullYear（）;
VAR日期=新的日期（）;
变种D = date.getDate（）;$ scope.events2 = []; //这个通过gDataService获取数据
$ scope.events3 = []; //这直接从addEvent_direct方法在这个控制器获取数据//这是我试图填充$ scope.events2
$范围。在$（'gDataUpdated'，函数（）{
  //alert(gDataService.events2.length）;  $ scope.events2 = gDataService.events2;
  + gDataService.events2.length.toString警报（'事件=的gDataService＃'（）
  +'; $ scope.events2包括'+ $ scope.events2.length.toString（））;
  //警报信息表明$ scope.events正确更新基于
  // gDataService.events2，但新的事件不会出现在日历上。
}）;//这是$ scope.events3是如何成功地填充
$ scope.addEvent_direct =功能（）{    VAR今天=新的Date（）;
    变种M = today.getMonth（）;
    变种Y = today.getFullYear（）;
    变种D = today.getDate（）;
    对象= {标题：直接添加事件，
        开始：新的Date（Y，M，28）
        最终，新的日期（Y，M，29）
        产品类别：['OPENSESAME']}
    $ scope.events3.push（对象）;
}//既events2和events3被包括作为eventSources
$ scope.eventSources = [$ scope.events2，$ scope.events3]$ scope.uiConfig = {
    fullCalendar：{
        高度：550，
        编辑：假的
    }
};
}
。CalendarCtrl $注射='$范围'，'gDataService'];
 

//这是工厂，从另一个控制器（ButtonCtrl）获取EVENT2数据

  app.factory（gDataService功能（$ rootScope）{
变种服务= {};
service.events = [];
service.events2 = [];
service.added_event_short = {启动：空，标题：空};service.addData =功能（对象）{  this.events2.push（对象）;
  //alert(this.events2.length）;
  $ rootScope $广播（gDataUpdated）;
};退换货服务;
}）;
 

//这是为了测试不同的控制器如何共享通过工厂数据从CalendarCtrl分离的控制器

  app.controller（'ButtonCtrl'，函数（$范围，gDataService）{  $ scope.addEvent =功能（）{    VAR今天=新的Date（）;
    变种M = today.getMonth（）;
    变种Y = today.getFullYear（）;
    变种D = today.getDate（）;
    对象= {标题：'芝麻开门'，
        开始：新的Date（Y，M，28）
        最终，新的日期（Y，M，29）
        产品类别：['OPENSESAME']}  gDataService.addData（对象）;
}
}）;
 

解决方案

使用这样的：

  //$scope.events2 = gDataService.events2; //下面取代
  angular.forEach（gDataService.events2，函数（事件）{
    的console.log（事件）;
    $ scope.events2.push（事件）;
  }）;
 

原因是，你用'$ scope.events2在视图中的数据绑定，但你更换的js更新过程中与新的数据对象。然后在previous对象的表不走了。

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'];

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

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

解决方案

Use this:

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

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通过填充厂UI角，日历的addEvent不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！