1

ui-bootstrap-tabsを使用しているアプリケーションがあります。ドキュメントはこちら。ng-bs-daterangepicker を使用します。私が観察している動作は、daterangepicker を ui-tab 内に配置するたびに発生することです。それに付随するイベントをキャッチすることはできません。しかし、その入力タグを ui-tabs の外に移動すると、それに関連付けられたイベントをキャッチできます。

私の問題を強調するために、機能するプランカーを作成しました。

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

ここには 2 つの入力タグがあります。1 つは uib-tab の内側にあり、もう 1 つはその外側にあります。

 $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);
});

変形プランカー

于 2016-11-28T17:16:32.663 に答える