5

我正在使用 ui-date ( https://github.com/angular-ui/ui-date ) （这是一个扩展 jquery ui 日期选择器的角度指令）在单击输入时创建一个弹出日期选择器在。问题在于它位于 $modal 窗口内（来自 angular-ui）。当您单击输入框时，日期选择器的 div 将附加到底部，就在结束标记的上方，它位于包含 $modal 的 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>

希望这能解释这个问题。

4

2 回答 2

1

为什么不使用 angular ui bootstrap datepicker，它根本不依赖 jquery，这里是链接：https ://angular-ui.github.io/bootstrap/#/datepicker

我认为它会更适合您，希望对您有所帮助。:)

于 2016-08-30T20:56:14.470 回答
0

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

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

向@Gustavo 致敬，因为remove()他在评论中提到了他的回答。

否则，为 ui-date 项目向 GitHub 提交 PR。在第 172 行修改以下代码：

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

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

于 2016-08-31T18:05:53.997 回答