Question

继续我以前的帖子：ui-calendar is not working, not rendering events

我正在使用angularjs ui-calendar接受一系列事件作为ng-model，以便在日历中显示它们。

问题是在浏览器呈现日历之前必须准备好并定义事件。

我在控制器中定义了这样的事件：

    events2 = [{
        title: 'Event1',
        start: '2017-09-27',
        end: '2017-09-27'
    }];
    events3 = [{
        title: 'Event2',
        start: '2017-09-28',
        end: '2017-09-28'
    }];

然后在$ onInit（或在控制器的构造函数中）我设置：

this.eventSources = [this.events2, this.events3];

在HTML中我将组件定义为：

<div ng-model="vm.eventSources" ui-calendar></div>

一切正常。

但是，如您所见，事件是硬编码的，并且在呈现日历之前可用。

在我的实际情况中，我通过调用Google Calendar API获取事件，并且延迟（通过承诺）返回事件，因此，当我从Google服务获取事件时，我需要触发日历的REDRAW

我该怎么做？ ui-calendar不是一个简单的HTML控件，它会在更改ng-model时显示更改，而是第三方组件，因此，在这种情况下，我需要在事件到达后触发重新呈现日历。

知道怎么做吗？

这是调用Google Service获取事件的方法：

    getCalendarEvents() {
        console.log('getCalendarEvents');
        this.service.getCalendarEvents().then(events => {
            //this.events = <CalendarEvent[]>events;
            this.eventSources = [this.events2, this.events3];
        });
    }

即使我在然后之后使用硬编码事件，日历也不会显示它们，它需要在this.eventSources中重新绘制一个新值

请建议！使用$ scope。$ apply（）无效。

Answer 1

在angularJS中使用Resolve。 Resolve将在加载/执行控制器之前调用您的服务带来数据，这样您就可以在加载/执行视图和控制器之前获取数据，然后您可以将其作为依赖项注入控制器以获取数据。

这是我的工作代码段。

<input type="email" name="email" id="email" name="email" data-email-msg="" data-required-msg="">

.state('abc', {
  controller : 'controller',
  controllerAs : 'controllerAs',
  resolve : {
    getProjectData : ['MyService', '$state',
      function(MyService, $state) {
          return MyService.getProjectDetails();
      }]
  }
  
  app.controller('controller', ['getProjectData', function(getProjectData) {
    console.log(getProjectData);  // Here you will get all your data
    vm.data = getProjectData;
    
  //setting schedule list in fullcalendar
	vm.eventSources.push({events : vm.data});
  }]);

当事件到达时（通过承诺）如何重新绘制（重新渲染）ui日历？

1 个答案: