Kątowa data w środku modalnego

Używam daty interfejsu użytkownika (https://github.com/angular-ui/ui-date) (która jest dyrektywą kątową, która rozszerza selektor daty jquery ui), aby utworzyć podręczny selektor daty po kliknięciu wejścia. Problem polega na tym, że znajduje się on w oknie modalnym $ (od kąta-ui). Po kliknięciu pola wprowadzania element div dla selektora daty jest dołączany do dołu, tuż nad znacznikiem zamykającym, który znajduje się na zewnątrz elementu div zawierającego mod $. Dlatego, gdy okno $ modal jest zamknięte (i tym samym usunięte z DOM), div dla selektora daty pozostaje.Kątowa data w środku modalnego

nie mogłem znaleźć żadnej dokumentacji na obu jQuery lub UI-terminie, który pozwoliłby div mają być dołączone do innego elementu, to wydaje się być zbudowany w.

jestem pewien, w jaki sposób można to rozwiązać.

Kod podczas dacie zbieranie

<body> 

<div class="modal"> <!-- This is the modal div which will be created and destroyed --> 
<input type="text" class="input-calendar" id="reason_date" name="reason_date" ng-model="effectiveDate" ui-date="DateOptions" date-input-format date-validation required="required" autocomplete="off" /> 
</div> 

<!-- This is where the date-picker div is appended --> 
<div class="date-picker"> 
</div> 

</body>

Po modalna została zamknięta

<body> 

<!-- Modal div has been destroyed upon close --> 

<!-- Date picker div was outside of modal div, so it remains --> 
<div class="date-picker"> 
</div> 

</body>

Mam nadzieję, że to wyjaśnia tę kwestię.

Źródło

2016-08-30 mls3590712

można pisać kod? Wygląda na to, że to, co robisz, powinno zadziałać. – dwbartz

Zaczekaj chwilę, czy używasz jQuery UI lub Angular-UI? – dwbartz

Co dzieje się z jQuery i co jest kanciaste? – empiric

Możesz podłączyć się do zdarzenia $modal$destroy i po prostu usunąć element. Więc wewnątrz sterownika dla modal, Zakładając, że wstrzykuje $scope:

$scope.$on('$destroy', function() { 
    $('.date-picker').remove(); 
});

Hat-tip do @Gustavo dla wspomnieć remove() w komentarzu do swojej odpowiedzi.

W przeciwnym razie prześlij PR do GitHub dla projektu końcowego. Modyfikować the following code na linii 172:

 $element.on('$destroy', function() { 
      $element.datepicker('hide'); 
      $element.datepicker('destroy'); 
     });

dodać $element.remove(); w przewodnika $destroy ...

Źródło

2016-08-31 18:05:53

Druga część tej odpowiedzi nie zadziała, element $ nigdy nie zostanie "zniszczony" w tym scenariuszu, tylko ukryty. Pierwsza część odpowiedzi należy do kategorii "tak naprawdę nie jest kanciasta", ponieważ modyfikuje dom od wewnątrz kodu kontrolera. Jednak ponieważ nie mogę wymyślić żadnego innego rozwiązania (poza modyfikacją kodu dostawcy dla datepicker jquery, aby umożliwić dodanie jego elementu), zgodzę się, że to faktycznie odpowiada na pierwotne pytanie – mls3590712

Dlaczego nie używasz bootstrap kątową ui datepicker, który robi zależą jQuery w ogóle, tu jest link: https://angular-ui.github.io/bootstrap/#/datepicker

myślę, że będzie lepiej garnitury, nadzieję, że to pomaga. :)

Źródło

2016-08-30 20:56:14

Uwierz mi, chciałbym, niestety, wziąć pod uwagę wniosek, że nie w pełni kontroluję wymagania. – mls3590712

Nie jestem ekspertem od jquery, ale jest jakakolwiek szansa zrobienia czegoś takiego: $ (".date-picker") .remove(); –

Kątowa data w środku modalnego

Odpowiedz

Powiązane problemy