Ui-tabset 和 bootstrap-daterangepicker 不能一起工作？

Question

我有一个正在使用 ui-bootstrap-tabs. documentation here. With the ng-bs-daterangepicker 的应用程序。我观察到的行为是，每当我将 daterangepicker 放在 ui-tab 中时。它无法捕获附加到它的事件。但是当我将该输入标签移到 ui-tabs 之外时，它能够捕获与其关联的事件。

我创建了一个工作 plunker 来突出我的问题。

<body ng-app="myApp">
    <div ng-controller="testController">
      <uib-tabset>
        <uib-tab index="0" heading="Drivers"></uib-tab>
        <uib-tab index="1" heading="Charts">
          <input class="btn btn-danger" type="daterange" id="daterange1" ng-model="dates" format="DD MMM" ranges="ranges" />
        </uib-tab>
      </uib-tabset>
      <!-- <input class="btn btn-danger" type="daterange" id="daterange1" ng-model="dates" format="DD MMM" ranges="ranges" /> -->
    </div>
  </body>

这里有两个输入标签。一个在 uib-tab 里面，另一个在它外面。

 $scope.dates = {
    startDate: moment().startOf('day'),
    endDate: moment().endOf('day')
  };

  $scope.ranges = {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
    'Last 7 days': [moment().subtract('days', 7), moment()],
    'Last 30 days': [moment().subtract('days', 30), moment()],
    'This month': [moment().startOf('month'), moment().endOf('month')]
  };
  $('#daterange1').on('apply.daterangepicker', function(ev, picker) {
    console.log(picker.startDate);
    console.log(picker.endDate);
  });

事件 apply.daterangepicker 在我激活内部输入按钮时未被调用，但在我激活外部输入按钮时被调用。

我的做法
我猜这不是某些帖子中强调的范围问题。因为如果是这样，那么为什么连日期都被填充了。另一件事可能是 Known issue 列，它说

To use clickable elements within the tab, you have override the tab template to use div elements instead of anchor elements, and replicate the desired styles from Bootstrap's CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.

也许这以某种方式阻止了事件传播。我被困在这一点上，想不出解决方法。希望社区能在这里提供帮助...

Answer 1

在 $('#daterange1').on 的情况下，事件附加到的对象必须在 .on() 被调用时存在。

当 daterangepicker 在 Tabs 组件内初始化时，您可以像这样附加事件：

$("body").on("apply.daterangepicker", "#daterange1", function(e,picker) {
    console.log(picker.startDate);
    console.log(picker.endDate);
});

Modified plunker

Ui-tabset 和 bootstrap-daterangepicker 不能一起工作？

Ui-tabset and bootstrap-daterangepicker not working together?

angular-bootstrap

bootstrap-daterangepicker