ui-tabset 和 bootstrap-daterangepicker 不能一起工作？答案

【问题标题】：Ui-tabset and bootstrap-daterangepicker not working together?ui-tabset 和 bootstrap-daterangepicker 不能一起工作？
【发布时间】：2016-11-29 01:16:32
【问题描述】：

我有一个使用ui-bootstrap-tabs 的应用程序。文档here。使用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，但当我激活外部输入按钮时会调用事件。

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

要在选项卡中使用可点击元素，您需要覆盖选项卡模板使用 div 元素而不是锚元素，并复制 Bootstrap 的 CSS 中所需的样式。这是由于浏览器将锚元素解释为任何点击事件的目标，当某些元素（例如按钮）嵌套时触发路由在锚元素内部。

也许这会阻止事件传播。我被困在这一点上，想不出如何解决它的解决方案。希望社区能在这里提供帮助...

【问题讨论】：

嗯...我正面临着这个问题，试图将 React 组件硬塞到旧版 Tabset 中，谢谢

标签： angular-bootstrap bootstrap-daterangepicker

【解决方案1】：

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

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

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

Modified plunker

【讨论】：

那么你是怎么想出来的？你知道这一点，还是通过调试？
我怀疑是因为 .on() 函数需要应用于静态对象，否则不会注册事件
这澄清了它，并将记住进一步的此类问题。感谢您的时间和精力。