如何在事件到達時（通過承諾）重新繪製（重新呈現）UI日曆？

繼續我的上一篇文章：ui-calendar is not working, not rendering events 如何在事件到達時（通過承諾）重新繪製（重新呈現）UI日曆？

我使用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改變時顯示更改，但會顯示第三方組件，所以在這種情況下，我需要在事件到達後觸發日曆的重新呈現。

任何想法如何做到這一點？

這是調用谷歌服務來獲取事件的方法：

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

即使我使用硬編碼的事件之後然後日曆不顯示它們，它需要有一個新的值被重繪in this.eventSources

請指教！使用$ scope。$ apply（）不起作用。

來源

2017-09-26 monstro

在angularJS中使用Resolve。 Resolve會調用你的服務在加載/執行控制器之前調用這些數據，這樣你就可以在你的視圖和控制器被加載/執行之前獲得你的數據，然後你可以在控制器中注入它作爲依賴來獲取數據。

這是我的工作代碼片段。

.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 
 
\t vm.eventSources.push({events : vm.data}); 
 
    }]);

<div ui-calendar="controller.uiConfig.calendar" \t id="calendar" ng-model="controller.eventSources"></div>

來源

2017-09-27 06:19:13

如何在事件到達時（通過承諾）重新繪製（重新呈現）UI日曆？

回答

相關問題