Question

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

希望这可以解释这个问题。

Answer 1

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

我认为它会更适合你，希望它有所帮助。：）

Answer 2

You can hook into the $modal's $destroy event and simply remove the element. So inside the controller for the modal, assuming you've injected $scope:

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

Hat-tip to @Gustavo for mentioning remove() in a comment to his answer.

Otherwise, submit a PR to the GitHub for the ui-date project. Modify the following code at line 172:

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

to add $element.remove(); in the $destroy handler...

模态

2 个答案: