完成对角度服务的异步调用后，调用控制器功能

Question

I'm using the Angular Bootstrap Calendar with a custom cell template and cell modifier . In my controller, I need to get some config data from a service that is used in the cellModifier function before the modifier function is called.

(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();
    // Get 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) {
      // Do work to create the data in the custom cell.
    };

    $scope.$on('$destroy', function() {
      calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
    });
  });
})();

The config data I need to use is returned from the two calls to the shiftService service, and that part works fine. As shown in the docs , the cell modifier function is called 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>

When I run my code as it is, the cellModifier is called before the calls to shiftService.getStationConfig and shiftService.getShiftsMonth are returned.

Considering that the cellModifier is called from outside the controller, how I can I structure my code so that the cellModifier isn't called until the other two calls to shiftService have returned their data?

Thanks.

Answer 1

If cellModifier get called from outside then you obviously have no control over when it's going to be called. However, the good news is that you don't actually have to have that control. All you need is to postpone doing your stuff until those two internal calls are finished, and this is pretty easy.

var promise1 = shiftService.getStationConfig();
promise1.then(function(data) {
  vm.configSlots = data;
});

var promise2 = shiftService.getShiftsMonth(token, startDate, endDate);
promise2.then(onShifts, onError);

vm.cellModifier = function(cell) {
    $q.all([promise1, promise2]).then(function () {
        // do your stuff here
    });
};

The only additional thing you need is to inject $q service into your controller.