Access each individual custom cell with Angular bo

问题:

I'm working on an app where I need a calendar skeleton (without the standard events) so I can put tables inside each cell, so I'm using the Angular Bootstrap Calendar with custom cell templates. I have everything working fine in terms of displaying the custom template in each cell and being able to navigate between months, but I need to be able to access each individual day and make data available in each one.

Here's my controller:

(function() {
  angular.module('myApp')
    .controller('calendarController', function($scope, $state, moment, calendarConfig) {

    var vm = this;

    calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
    calendarConfig.dateFormatter = 'moment';

    vm.events = [];
    vm.calendarView = 'month';
    vm.viewDate = moment().startOf('month').toDate();

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

and the corresponding dayTemplate.html:

<div class="cal-month-day">

    <span
      class="pull-right"
      data-cal-date
      ng-click="calendarCtrl.dateClicked(day.date)"
      ng-bind="day.label">
    </span>
<!--
  <small style="position: absolute; bottom: 10px; left: 5px">
    There are {{ day.events.length }} events on this day
  </small> -->

  <!-- <table class="table table-bordered table-condensed"> -->
  <table class="table table-bordered table-condensed">
    <thead>
      <tr>
        <td>Station</td>
        <td>Position</td>
        <td>Name</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3" align="top">1</td>
        <td>Position</td>
        <td>Name</td>
      </tr>
      <tr>
        <td>Position</td>
        <td>Name</td>
      </tr>
      <tr>
        <td>Position</td>
        <td>Name</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-bordered table-condensed">
    <tbody>
    <tr>
      <td rowspan="3" align="top">2</td>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    </tbody>
  </table>

  <table class="table table-bordered table-condensed">
    <tbody>
    <tr>
      <td rowspan="3" align="top">3</td>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    </tbody>
  </table>

</div>

When using the calendar as it normally is used, you can see that the days.events object has the data, but I need to access that object, or create my own so I can fill my tables. Is there a simple (or even not so simple) way to do that?

Thanks.

UPDATE: I just went back and read the docs and noticed this

An optional expression that is evaluated on each cell generated for the year and month views. calendarCell can be used in the expression and is an object containing the current cell data which you can modify (see the calendarHelper service source code or just console.log it to see what data is available). If you add the cssClass property it will be applied to the cell.

Due to my lack of knowledge, I'm not understanding how to use this to override. If I console.log calendarCell in my calendarController it chokes because that object doesn't exist. If I'm reading this correctly, I can intercept the cell data and modify, but I'm not understanding how.

回答1:

In this case, RTFM turned out to be the correct answer. Per the docs:

<div ng-controller="CellModifierCtrl as vm">
  <ng-include src="'calendarControls.html'"></ng-include>
  <mwl-calendar
    events="vm.events"
    view="vm.calendarView"
    view-date="vm.viewDate"
    cell-modifier="vm.cellModifier(calendarCell)">
  </mwl-calendar>
</div>

goes with this in the controller:

vm.cellModifier = function(cell) {
  console.log(cell);
  if (cell.label % 2 === 1 && cell.inMonth) {
    cell.cssClass = 'odd-cell';
  }
  cell.label = '-' + cell.label + '-';
};

and voila!, you have access to the data. I'm still trying to figure out how to pass additional data into the function, but I'll open a separate question for that.