Bootstrap UI angolare - Popup Datepicker

Question

Mi piacerebbe avere un popup di Datepicker dopo aver fatto clic su un pulsante utilizzando i componenti della libreria Bootstrap della UI angolare. Ci sono esempi di entrambi sul sito web Angular UI Boostrap ma non vedo un modo per combinarli. Non mi piace l'idea di inserire Datepicker div come valore di attributo per il testo della direttiva popup.

Ho anche provato a utilizzare ng-show su Datepicker div ma non riesco a farlo funzionare.

Ecco il codice che ho al momento.

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

Non mi piace la strategia ng-show. Preferirei che fosse un popover ma presumo che ci siano modi per farlo anche in questo modo, quindi non mi dispiacerebbe neanche.

Answer 1

Aggiornamento 2015-08-16 - A partire da Angular UI Bootstrap 0.13.0 questa funzionalità è ora inclusa! Funziona molto simile a quello che ho descritto di seguito. Per utilizzare questa funzione, aggiungi popover-template="'mytemplate.html'" all'elemento a cui desideri applicare il popover.

Ho creato new example mostrando questa funzione in azione.

---

A partire dal 2013/07/02, c'è un open issue con il progetto angolare UI Bootstrap per consentire di inserire codice HTML all'interno di un popover.

Se/quando questa modifica viene unita, sarete in grado di inserire un datepicker all'interno di un modello e quindi fare riferimento a questo modello aggiungendo popover-template="mytemplate.html" all'elemento su cui è stato dichiarato il popover.

Come esempio di questa funzionalità, è possibile vedere un Plunker that I recently forked.

Aggiornerò questa risposta man mano che la situazione cambia.

EDIT

Se vi sentite avventurosi, il codice che ho utilizzato è basato su Pull Request 369, che porta a this commit.

Ci sono tre ragioni che io sono a conoscenza del motivo per cui il commit non è ancora stata fusa:

1. C'è un ambito che ha bisogno di essere ripulito quando un ambito genitore viene distrutto. Questo è menzionato in un commento fatto da Pawel Kozlowski nel commit che ho collegato.
2. L'apertura, la chiusura e la riapertura del popover causano l'interruzione dell'obbligo all'oscillazione quando il popover si riapre. Ho postato una soluzione a questo in Issue 220 (stesso problema collegato sopra).
3. Non ci sono ancora test intorno a questo.

Potrei provare a trovare un po 'di tempo questo fine settimana per lavorare su questi temi in modo che possa essere unito al progetto.