监听自定义按钮点击并在控制器中重新呈现 angularJs datePicker 弹出窗口的日期

Question

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

我可以看到如下图所示的自定义按钮，但我想在我的控制器中听到 "Regular Price" 按钮的点击，并使用一些新的自定义 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 指令创建了一个 isolated 范围并且 ng-include 创建了一个子范围，因此可以访问在您的控制器中定义的 regularPrice 处理程序像这样：$parent.$parent.regularPrice()

这是一个修改后的弹出模板：

<div>
<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="$parent.$parent.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($event)">{{ getText('close') }}</button>
  </li>
</ul>
</div>

Demo

监听自定义按钮点击并在控制器中重新呈现 angularJs datePicker 弹出窗口的日期

Listen custom Button click and re-render dates in controller for angularJs datePicker popup

datepicker

angularjs

angular-ui-bootstrap

编辑