UI Bootstrap datepicker dupliqué lors de l'ajout au corps

Question

J'utilise ui.bootstrap.datepickerPopup dans un modèle d'en-tête de filtre à l'intérieur de ui.grid. Cela me permet de filtrer les lignes par date. J'ai également un bouton dans le menu de la grille qui permet de basculer grid.options.enableFiltering.

En raison de problèmes d'alignement avec ui-grid, j'ai datepicker-append-to-body mis à vrai pour mes datepickers. La première fois que j'active le filtrage, tout fonctionne correctement. Cependant, lorsque je désactive le filtrage et que je le réactive, je reçois des duplicateurs de date.

C'est ce que le problème ressemble:

Je pense que le problème est que chaque fois que les filtres sont activés, est ajouté au DOM et n'a jamais retiré la div suivante lorsque les filtres sont désactivés.

<div uib-datepicker-popup-wrap="" 
    ng-model="date" 
    ng-change="dateSelection(date)" 
    template-url="uib/template/datepickerPopup/popup.html" 
    class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled" 
> 
    <!-- ngIf: isOpen --> 
</div> 

Voici une plunker simplifiée:http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
Je reçois le même problème si j'utilise un seul datepicker dans l'en-tête de filtre Time Range.

Toutes les idées sont grandement appréciées! Je ne veux pas utiliser jQuery.

Answer 1

Je n'ai pas de réponse sur les raisons de ce qui se passe mais une solution sans jQuery serait de supprimer les fenêtres pop-up lors du déclenchement de la bascule de filtre à l'aide document.querySelectorAll()

var elements = document.querySelectorAll("div[uib-datepicker-popup-wrap]"); 
Array.prototype.forEach.call(elements, function(node) { 
    node.parentNode.removeChild(node); 
}); 

Plunker here