1

我有一个使用ui-bootstrap-tabs的应用程序。文档在这里。使用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 复制所需的样式。这是由于浏览器将锚元素解释为任何单击事件的目标，当某些元素（例如按钮）嵌套在锚元素内时，这会触发路由。

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

4

1 回答 1

1

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

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

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

修改后的 plunker

于 2016-11-28T17:16:32.663 回答