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条目

带按钮的多个角度ui bootstrap datepickers

1 个答案: