Angular UI Bootstrap - ポップアップDatepicker

Question

Angular UI Bootstrapライブラリのコンポーネントを使用してボタンをクリックすると、datepickerポップアップが表示されます。 両方の例がAngular UI Boostrapウェブサイトにありますが、それらを組み合わせる方法はありません。私はpopupディレクティブのテキストの属性値としてDatepicker divを配置するという考え方は嫌いです。

また、ng-showをDatepicker divにも使用しようとしましたが、それでも動作できません。

ここに私が今持っているコードがあります。

<div ng-controller="DatepickerCtrl" class="input-append"> 
     <input class="input-small ng-pristine ng-valid" 
       type="text" 
       ng-value="dt" /> 
     <button type="button" 
       class="btn" 
       popover-placement="right" 
       ng-click"showDatePicker=true"  // the show when clicked strategy 
       popover="On the Right!">   // Don't see a way to make this encapsulate a div 
        <i class="icon-calendar"></i> 
     </button> 
     <datepicker ng-model="dt" 
        ng-show="showDatePicker" 
        starting-day="1" 
        date-disabled="disabled(date, mode)" 
        min="minDate" max="'2015-06-22'"> 
     </datepicker> 
</div> 

私は本当にng-show戦略が嫌いです。むしろそれをポップオーバーにするのだろうかと思うが、それをもっと良くするための方法があると思うので、私は気にしないだろう。

Answer 1

更新 2015-08-16 - Angular UI Bootstrap 0.13.0から、この機能が追加されました！これは、私が下で説明したものと非常によく似ています。この機能を使用するには、ポップオーバーを適用する要素にpopover-template="'mytemplate.html'"を追加します。

私はこの機能が動作していることを示すnew exampleを作成しました。 2013年7月2日のよう

---

、あなたはポップオーバー内のHTMLマークアップを置くことを可能にする角度UIブートストラッププロジェクトとopen issueがあります。

この変更をマージすると、テンプレート内に日付ピッカーを配置し、ポップオーバーを宣言した要素にpopover-template="mytemplate.html"を追加することでこのテンプレートを参照できます。

この機能の例として、Plunker that I recently forkedがあります。

状況が変化すると、この回答が更新されます。あなたは冒険を感じている場合は

EDIT

、私が使用したコードは、意志がthis commitにつながる、Pull Request 369に基づいています。

私はコミット理由としての認識しています三つの理由がありますが、まだマージされていない。

1. 親スコープが破壊されたときにクリーンアップする必要があるスコープがあります。これはPawel Kozlowskiが私がリンクしたコミットのコメントで言及されています。
2. ポップオーバーのオープン、クローズおよび再オープンにより、ポップオーバーが再開されたときにスコープブレークがバインドされます。私はこれに対応策をIssue 220に掲載しました（上記と同じ問題がリンクされています）。
3. まだこれに関するテストはありません。

私はそれがプロジェクトにマージすることができますので、これらの問題に取り組むためにいくつかの時間にこの週末を見つけることを試みることができます。