Angular 1 UI FullCalendar选中日期无法传递至控制器问题求助

我之前也碰到过这个问题，核心原因是你误用了原生ng-click来处理日历的日期点击事件，而没有使用mwl-calendar组件自带的day-click回调属性，导致无法正确获取选中的日期。

修改步骤： #

1. 更新HTML中的日历组件配置
   把你原来的ng-click="dayClick(selectedDate)"替换成组件专属的day-click属性，组件会自动把点击的日期作为参数传入回调函数：

   <div class="panel-body">
     <mwl-calendar 
       events="events" 
       view="calendarView" 
       current-day="calendarDay" 
       ng-model="selectedDate" 
       view-title="calendarTitle" 
       <!-- 替换原来的ng-click为下面这行 -->
       day-click="dayClick(calendarDate)" 
       delete-event-html="'<div class=\'btn btn-danger btn-sm margin-right-10 pull-right\'><i class=\'ti-close\'></i></div>'" 
       edit-event-click="eventEdited($event)" 
       delete-event-click="eventDeleted($event)" 
       on-drill-down-click="false" 
       cell-modifier="modifyCell(calendarCell)">
     </mwl-calendar>
   </div>
   

2. 调整控制器中的回调函数
   你不需要自己定义selectedDate作为参数，组件会把点击的日期对象传递给dayClick函数，直接接收即可。如果需要把选中的日期绑定到$scope.selectedDate，也可以在回调里手动赋值：

   var SalesCalenderController = function($scope, $rootScope,$filter, $http, $location,$route,$routeParams,SalesCalenderService) {
     $scope.calendarView = 'month';
     $scope.calendarDay = new Date();
     $scope.selectedDate = null; // 初始化选中日期变量
     
     // 接收组件传递的calendarDate参数
     $scope.dayClick = function(calendarDate) {
       $scope.selectedDate = calendarDate; // 绑定到scope变量
       alert(moment(calendarDate).format('YYYY-MM-DD')); // 用moment格式化后显示，或者直接打印calendarDate
     };
     
     $scope.modifyCell = function(calendarCell) {
       for (var i = 0; i < $scope.dates.length; i++) {
         if (moment(calendarCell.date).isSame(moment($scope.dates[i]), 'day'))
           calendarCell.isCustom = true;
       };
     }
   }
   

为什么原来的方法无效？ #

原生的ng-click并不能直接获取到组件内部的日期对象，mwl-calendar组件封装了自己的事件回调机制，day-click属性是组件专门用来处理日期单元格点击的回调，它会自动将点击的日期对象（calendarDate）作为参数传递给你定义的函数，这样就能正确拿到选中的日期值了。

内容的提问来源于stack exchange，提问作者Sachin HR