Question

我使用带有custom cell template和cell modifier的Angular Bootstrap日历。在我的控制器中，我需要从调用修饰符函数之前在cellModifier函数中使用的服务中获取一些配置数据。

(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';
    });
  });
})();

我需要使用的配置数据是从对shiftService服务的两次调用返回的，那部分工作正常。如docs所示，从mwl-calendar指令调用单元格修饰符函数。

<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>

当我按原样运行代码时，会在返回对shiftService.getStationConfig和shiftService.getShiftsMonth的调用之前调用cellModifier。

考虑到从控制器外部调用cellModifier，我如何构造我的代码，以便在调用shiftService的其他两个调用返回其数据之前不调用cellModifier？

感谢。

Answer 1

如果从外部调用cellModifier，那么你显然无法控制何时调用它。然而，好消息是你实际上不必拥有这种控制权。所有你需要的是推迟做你的东西，直到这两个内部调用完成，这很容易。

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

您需要的唯一额外事情是将$ q服务注入您的控制器。

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

1 个答案: