2

Twitter Bootstrap と AngularJS で構築されたサイトに取り組んでいます。カレンダー入力フィールドは、datepicker を使用しているカレンダーをポップアップ表示します。コードは次のとおりです。

    <div class="control-group {{errors.start_date.class}}">
      <label class="control-label">Start Date</label>
      <div class="controls">
        <input type="text" class="input-small" value="{{round.start_date | date:'MM/dd/yyyy'}}" data-ng-model="round.start_date" id="start_date" onfocus="$('#start_date').datepicker({format:'mm/dd/yyyy'});$('#start_date').datepicker('show');" required>
         <span class="help-block" data-ng-show="errors.start_date">{{errors.start_date.message}}</span>
      </div>
    </div>

日付を選択した後、カレンダー ポップアップの外側の領域をクリックしましたが、ポップアップが閉じません。以下のコードでわかるように、「autoclose:'true'」を追加しようとしましたが、ポップアップはまだ閉じません。

    <div class="control-group {{errors.start_date.class}}">
      <label class="control-label">Start Date</label>
      <div class="controls">
        <input type="text" class="input-small" value="{{round.start_date | date:'MM/dd/yyyy'}}" data-ng-model="round.start_date" id="start_date" onfocus="$('#start_date').datepicker({format:'mm/dd/yyyy','autoclose':true});$('#start_date').datepicker('show');" required>
         <span class="help-block" data-ng-show="errors.start_date">{{errors.start_date.message}}</span>
      </div>
    </div>

これを修正する方法について誰か考えがありますか？実際、日付をクリックした後もカレンダーのポップアップが閉じるといいのですが。

2012 年 12 月 3 日の更新: 以前は、jquery-ui-1.9.2.custom.min.js と次のコードをコントローラーに追加していました。

$(".modal").draggable();

それが、カレンダーのポップアップの外をクリックしたときにカレンダーのポップアップを閉じることができなかった理由です。それらを削除すると、カレンダーを閉じることができます。ただし、モーダル ウィンドウをドラッグ可能にして、カレンダーを閉じることができるようにしたいと考えています。両方を行う方法はありますか？また、日付をクリックしてもカレンダーを閉じることができません。誰か提案はありますか？

4

1 に答える 1

1

AngularJSに外部ライブラリを含める場合、双方向のデータバインディングとDOMイベントが正しく機能するように、それらをディレクティブでラップする必要があることがよくあります。ドキュメントリンク：AngularJSディレクティブ

TwitterBootstrapとjQueryUIの多くの要素は、AngularUIの人々のグループによってすでに便利にまとめられています。これらは、http：//angular-ui.github.com/で見つけることができます。

日付ディレクティブのソースコードは次のとおりです。httpslink ：//github.com/angular-ui/angular-ui/blob/master/modules/directives/date/date.js、AngularJSは、関数内でコードを実行します。通常のdatepickerイベントリスナーが接続されるディレクティブをロードしました。

以下は、TwitterBootstrapフォームとdatepicker入力がAngularUIでどのように表示されるかを示すコード例です。この属性data-ui-dateは、この要素がディレクティブであることをAngularJSコンパイルプロセスに示すものです。dataパーツを省略して、属性をとして持つこともできますui-date。

    <div class="control-group">
        <label class="control-label">Start Date</label>
        <div class="controls">
            <input data-ng-model="round.start_date" data-ui-date="dateOptions" name="datepicker" type="text" class="input-medium" placeholder="">
        </div>
    </div>

dateOptions次のように、コントローラまたはディレクティブのどこかに設定されたスコープ値です。

    $scope.dateOptions = {
        changeYear: false,
        changeMonth: false,
        nextText: '<i class=icon-arrow-right></i>',
        prevText: '<i class=icon-arrow-left></i>',
        dateFormat: 'yy-mm-dd'
    };
于 2012-12-03T01:56:06.607 に答える