听取自定义按钮单击并在控制器中为angularJs datePicker弹出窗口重新渲染日期

Question

我已经覆盖了datepicker弹出窗口以添加自定义按钮。 我的自定义按钮包含在<script id="template/datepicker/popup.html" type="text/ng-template">内 指示。

我可以看到如下图所示的自定义按钮，但我想听我的控制器中的“常规价格”按钮的点击，并使用一些新的自定义css重新渲染日历的所有日期。我无法使用ng-click作为自定义按钮在我的控制器中获取任何事件。

如何在我的控制器中实现它？

修改

HTML

<!-- Overriding code for popup calendar-->
<script id="template/datepicker/popup.html" type="text/ng-template">
<ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">

  <!-- regular price button -->
  <button type="button" class="btn btn-sm btn-warning" ng-click="regularPrice()">Regular Price</button>
  <!-- /regular price button-->

  <li ng-transclude></li>
  <li ng-if="showButtonBar" style="padding:10px 9px 2px" class="uib-button-bar">
    <span class="btn-group pull-left">
        <button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
        <button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>
    </span>
    <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close()">{{ getText('close') }}</button>
  </li>
</ul>
</script>
<!-- /Overriding code for popup calendar -->

<div class="text-center">Check-in</div>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="check_in_date" is-open="checkInOpened" datepicker-options="dateOptions"  ng-required="true" close-text="Close" ng-change="selectedCheckinDate(check_in_date)" min-date="{{minDate}}" date-disabled="disabled(date, mode)" custom-class="getDayClass(date, mode)" show-weeks="false" disabled="disabled" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openCheckIn($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

在控制器中

$scope.regularPrice = function(){
  alert('regular selected');
};

Answer 1

由于uibDatepickerPopup指令创建隔离范围而ng-include创建子范围，因此可以像下面这样访问控制器中定义的regularPrice处理程序：{{ 1}}

以下是已修改的弹出式模板：

$parent.$parent.regularPrice()

Demo