Угловая UI-дата внутри модал

Я использую ui-date ( https://github.com/angular-ui/ui-date) (это угловая директива, расширяющая выбор даты в jquery ui) для создания всплывающего окна выбора даты при нажатии на вход на. Проблема в том, что он находится внутри $ модального окна (из angular-ui). Когда вы щелкаете по полю ввода, div для выбора даты добавляется внизу, чуть выше закрывающего тега, который находится ВНЕ от div, содержащего $modal. Поэтому, когда $ модальное окно закрыто (и, таким образом, удалено из DOM), div для выбора даты остается.

Я не смог найти ни документации ни по jquery, ни по ui-date, которая позволила бы добавить div к другому элементу, он, кажется, встроен.

Я не уверен, как это можно решить.

Код при выборе даты

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

После того, как модал был закрыт

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

Надеюсь, это объясняет проблему.

Источник

2 ответа

Решение

Вы можете подключиться к $modal "s $destroy событие и просто удалить элемент. Так что внутри контроллера для модальных, если вы ввели $scope:

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

Шляпа-подсказка @Gustavo за упоминание remove() в комментарии к его ответу.

В противном случае, отправьте PR в GitHub для проекта ui-date. Измените следующий код в строке 172:

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

добавить $element.remove(); в $destroy Обработчик...

Источник

Почему бы вам не использовать угловой загрузчик пользовательского интерфейса, который вообще не зависит от jquery, вот ссылка: https://angular-ui.github.io/bootstrap/

Я думаю, что это подойдет вам лучше, надеюсь, это поможет.:)

Источник
Другие вопросы по тегам