带有按钮的多个角度 ui 引导日期选择器

Question

我有两个现在可以工作的日期选择器，但我仍然无法让按钮工作。

我从here 实施了解决方案，但它摆脱了按钮。我想保留日历按钮。

如何保持日历按钮正常工作？

编辑：澄清一下，它仅适用于第一次点击

<div class="input-group">
  <input type="text"
   datepicker-popup="MM/dd/yyyy"
   ng-model="report_args.start_date"
   is-open="opened1"
   ng-click = "report_args.start_date.open = true"
   max-date="maxDate"
   datepicker-options="dateOptions"
   date-disabled="disabled(date, mode)"
   ng-required="true"
   close-text="Close"
   class="form-control">
  <span class="input-group-addon" ng-click="open($event,'opened1')">
    <i class="fa fa-calendar"></i>
  </span>
</div>

JS

$scope.open = function($event, opened) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope[opened] = true;
};

Answer 1

发生的事情是该指令在其子范围内创建了自己的 $scope.opened1 副本。当它第一次打开时，它会工作，因为它从父作用域读取值，但是当它关​​闭时，opened1 值在子作用域中更新，现在您无法从子作用域外部修改。

您需要做的是使用“点”符号。

JS

$scope.dpOpened = {
  opened1: false,
  opened2: false
};

$scope.open = function($event, opened) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.dpOpened[opened] = true;
};

HTML

<div class="input-group">
  <input type="text"
   datepicker-popup="MM/dd/yyyy"
   ng-model="report_args.start_date"
   is-open="dpOpened.opened1"
   ng-click = "report_args.start_date.open = true"
   max-date="maxDate"
   datepicker-options="dateOptions"
   date-disabled="disabled(date, mode)"
   ng-required="true"
   close-text="Close"
   class="form-control">
  <span class="input-group-addon" ng-click="open($event,'opened1')">
    <i class="fa fa-calendar"></i>
  </span>
</div>

在 Understanding Scope in AngularJs 上阅读此 wiki 条目