Question

我有一个使用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所需的样式。这是由于浏览器将锚元素解释为任何点击事件的目标，其中当某些元素（如按钮）嵌套时触发路由在锚元素内。

也许某种程度上这会阻止事件传播。我在这一点上陷入困境，无法想出如何解决它的解决方案。希望社区能在这里提供帮助......

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不能一起工作？

1 个答案: