Angular ui-模态内的日期

Question

我正在使用 ui-date (https://github.com/angular-ui/ui-date)（这是一个扩展 jquery ui 日期选择器的 angular 指令）来创建单击输入时弹出的日期选择器。问题是它在 $modal window 中（来自 angular-ui）。当您单击输入框时，日期选择器的 div 会附加到底部，就在结束标记的上方，它位于包含 $modal 的 div 的外部。因此，当 $modal window 关闭（并因此从 DOM 中删除）时，日期选择器的 div 仍然存在。

我找不到任何关于 jquery 或 ui 日期的文档，允许将 div 附加到另一个元素，它似乎是 bui进入。

我不确定如何解决这个问题。

日期选择期间的代码

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

希望这能解释问题。

Answer 1

为什么不使用 angular ui bootstrap 日期选择器，它根本不依赖于 jquery，这里是 link：https://angular-ui.github.io/bootstrap/#/datepicker

我认为这会让ui对你有帮助，希望对你有所帮助。 :)

Answer 2

您可以挂接到 $modal 的 $destroy 事件并简单地删除该元素。所以在模态控制器内部，假设你已经注入 $scope:

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

向@Gustavo 致敬，感谢他在对他的回答的评论中提到 remove()。

否则，为 ui 日期的项目向 GitHub 提交 PR。修改第 172 行的 the following code：

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

在 $destroy 处理程序中添加 $element.remove();...

Angular ui-模态内的日期

Angular ui-date inside of modal

jquery

angularjs

angular-ui-datepicker