I have integrated the Angular Bootstrap Calendar using a custom cell template and cell modifier. Within my controller, I need to retrieve configuration data from a service that is required by the cellModifier function before it is executed.
(function() {
angular.module('formioAppBasic')
.controller('calendarController', function($scope, moment, calendarConfig, $http, Formio, shiftService, AppConfig) {
var vm = this;
calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
calendarConfig.dateFormatter = 'moment';
vm.events = [];
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.appConfig = AppConfig;
vm.currentUser = Formio.getUser();
// Retrieve station config.
shiftService.getStationConfig().then(function(data) {
vm.configSlots = data;
});
shiftService.getShiftsMonth(token, startDate, endDate)
.then(onShifts, onError);
var onShifts = function(data) {
vm.events = data;
};
var onError = function(error) {
vm.error = 'There was an error.';
};
var startDate = moment(this.viewDate).toISOString();
var endDate = moment(this.viewDate).endOf('month').toISOString();
var endpoint = APP_URL + '/shift/submission';
var token = Formio.getToken();
vm.cellModifier = function(cell) {
// Code to generate data in the custom cell goes here.
};
$scope.$on('$destroy', function() {
calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
});
});
})();
The necessary configuration data is fetched through calls to the shiftService service, which functions correctly. As per the documentation, the cell modifier function gets invoked from the mwl-calendar directive.
<h1>Shift Calendar</h1>
<h2 class="text-center">{{ calendarTitle }}</h2>
<ng-include src="'views/calendar/calendarControls.html'"></ng-include>
<mwl-calendar
view="vm.calendarView"
view-date="vm.viewDate"
events="vm.events"
view-title="calendarTitle"
cell-is-open="true"
cell-modifier="vm.cellModifier(calendarCell)"
>
</mwl-calendar>
In my current setup, the cellModifier is triggered prior to the completion of the requests made to shiftService.getStationConfig and shiftService.getShiftsMonth.
Given that the cellModifier is accessed externally from the controller, how can I organize my code to ensure that the cellModifier is only called after both shiftService calls have provided their respective data?
Thank you.