我一直在努力解决angular-js问题，我无法弄清楚为什么我的ng-click没有通过任何值发送到连接到它的jquery函数。它触发jquery很好，但当它进入jquery时，它没有变量！
首先是一些信息：
我正在使用 angular-bootstrap-calendar Link to Project（这就是我遇到的问题）
使用 angular-bootstrap-calendar 我已使用github Instruction Page
中的说明实现了自定义日期模板ng-click会正确触发我的代码，但没有信息从点击传递到我的客户事件。
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(day)">
</mwl-calendar>
vm.dateClicked = function (day) {
alert("Do Something");
};
结果
day = undefined
版本：
"angular-bootstrap-calendar": "0.19.3",
"angular": "1.5.0",
"font-awesome": "4.5.0",
"moment": "2.12.0",
"interact.js": "1.2.6",
"angular-bootstrap": "1.2.4",
"angular-touch": "1.5.0",
"angular-animate": "1.5.0",
完整代码示例
ManRoster.cshtml
<div class="col-lg-12">
<div class="col-lg-12 panel panel-default">
<div ng-app="UserCal" class="textfix">
<script id="calendarWeekView.html" type="text/ng-template">
<div class="cal-week-box" ng-class="{'cal-day-box': vm.showTimes}">
<div class="cal-row-fluid cal-row-head">
<div class="cal-cell1"
ng-repeat="day in vm.view.days track by $index"
ng-class="{
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-today': day.isToday,
'cal-day-future': day.isFuture}"
mwl-element-dimensions="vm.dayColumnDimensions"
mwl-droppable
on-drop="vm.eventDropped(dropData.event, day.date)">
<div id="resourcescount">
{{ day.events.length }}
</div>
<span ng-bind="day.weekDayLabel">
</span>
<br>
<small>
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
</small>
</div>
</div>
<div class="cal-day-panel clearfix" ng-style="{height: vm.showTimes ? (vm.dayViewHeight + 'px') : 'auto'}">
<mwl-calendar-hour-list day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
day-width="vm.dayColumnDimensions.width"
view-date="vm.viewDate"
on-timespan-click="false"
ng-if="vm.showTimes">
</mwl-calendar-hour-list>
<div class="row">
<div class="col-xs-12">
<div class="cal-row-fluid"
ng-repeat="event in vm.view.events track by event.$id">
<div ng-class="'cal-cell' + (vm.showTimes ? 1 : event.daySpan) + (vm.showTimes ? '' : ' cal-offset' + event.dayOffset) + ' day-highlight dh-event-' + event.type + ' ' + event.cssClass"
ng-style="{
top: vm.showTimes ? ((event.top + 2) + 'px') : 'auto',
position: vm.showTimes ? 'absolute' : 'inherit',
width: vm.showTimes ? (vm.dayColumnDimensions.width + 'px') : '',
left: vm.showTimes ? (vm.dayColumnDimensions.width * event.dayOffset) + 15 + 'px' : ''
}"
data-event-class
mwl-draggable="event.draggable === true"
axis="vm.showTimes ? 'xy' : 'x'"
snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: 30} : {x: vm.dayColumnDimensions.width}"
on-drag="vm.tempTimeChanged(event, y)"
on-drag-end="vm.weekDragged(event, x, y)"
mwl-resizable="event.resizable === true && event.endsAt && !vm.showTimes"
resize-edges="{left: true, right: true}"
on-resize-end="vm.weekResized(event, edge, x)">
Shift
<strong ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true" ng-show="vm.showTimes"></strong>
<a href="javascript:;"
ng-click="vm.onEventClick({calendarEvent: event})"
class="event-item"
ng-bind-html="vm.$sce.trustAsHtml(event.title)"
uib-tooltip-html="event.title | calendarTrustAsHtml"
tooltip-placement="left"
tooltip-append-to-body="true">
</a>
</div>
</div>
</div>
</div>
<div id="ResourceInfo">
This will be the select panel
</div>
</div>
</div>
</script>
<!-- This is the end of the testing script -->
<div ng-controller="Cal as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(date)">
</mwl-calendar>
<br />
</div>
</div>
</div>
</div>
ManRoster.js
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal);
function populateCal($http, calendarConfig) {
var resultset = [];
var userID = 1;
var vm = this;
calendarConfig.templates.calendarWeekView = 'calendarWeekView.html';
vm.calendarView = 'week';
vm.viewDate = new Date();
vm.events = [];
vm.isCellOpen = true;
vm.toggle = function ($event, field, event) {
$event.preventDefault();
$event.stopPropagation();
event[field] = !event[field];
};
vm.dateClicked = function (day) {
alert("Do Something");
};
}
答案 0 :(得分：0)
让我们尝试一下。我已经创建了一个自定义指令来捕获点击事件，它似乎一直在为我捕捉日期。
http://plnkr.co/edit/1XlQkgj5eJeuy728bEwI?p=preview
添加一个指令（我只称它为testDirective）：
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal)
.directive('testDirective', testDirective);
强调文字
function testDirective() {
return {
link: function(scope,elem,attrs) {
angular.element(elem).on('click', function (evt) {
alert('You clicked on: ' + scope.vm.viewDate)
});
}
};
}
将其添加到mwl-calendar元素：
<mwl-calendar test-directive events="vm.events"
初步想法：
好吧，我想我现在拥有它。在index.html中，更改
on-view-change-click="vm.dateClicked(date)"
到
on-view-change-click="vm.dateClicked(this.vm.viewDate)"
它应该是这样的：
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(this.vm.viewDate)">
</mwl-calendar>