角型ブートストラップカレンダーで個々のカスタムセルにアクセスする

Question

標準的なイベントなしでカレンダースケルトンが必要なアプリケーションで作業しているので、Angular Bootstrap Calendarをcustom cell templatesで使用しています。私は、各セルにカスタムテンプレートを表示し、数か月の間にナビゲートできるという点ではすべてうまく動作していますが、個々の日にアクセスしてそれぞれのデータを利用できるようにする必要があります。ここで

は私のコントローラです：

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

と対応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> 

することは、あなたはdays.eventsオブジェクトが持っていることがわかりますデータにアクセスする必要がありますが、そのオブジェクトにアクセスする必要があります。または自分でテーブルを作成する必要があります。単純な（あるいはそれほど簡単ではない）方法はありますか？

ありがとうございました。

UPDATE：私はちょうど戻って、docsを読み、 年と月ビューのために生成された各セルに評価され、この

オプションの式に気づきました。 calendarCellは式 で使用でき、現在のセルデータを含むオブジェクトで、 （calendarHelperサービスsource codeを参照するか、console.logを参照して のデータを参照してください）を変更することができます。 cssClassプロパティを追加すると、 がセルに適用されます。

知識が不足しているため、これを無効にする方法を理解できません。私は、そのオブジェクトが存在しないため、私のcalendarControllerで私console.log calendarCellを窒息させる。私がこれを正しく読んでいるならば、私は細胞のデータを傍受して変更することができますが、私はそれを理解していません。

Answer 1

この場合、RTFMが正しい答えであることが判明しました。 docsパー：

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

をして出来上がり！あなたは、データへのアクセス権を持っている：

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

コントローラでこれを行きます。私はまだ関数に追加データを渡す方法を理解しようとしていますが、別の質問をします。