模态中的角度ui-date

mls*_*712 5 jquery angularjs angular-ui-datepicker

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

模态关闭后

<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>
Run Code Online (Sandbox Code Playgroud)

希望这能解释这个问题.

Her*_*key 0

您可以挂钩$modal's$destroy事件并简单地删除该元素。因此,在模态控制器内部,假设您已注入$scope

$scope.$on('$destroy', function () {
  $('.date-picker').remove();
});
Run Code Online (Sandbox Code Playgroud)

向@Gustavo 致敬,感谢他remove()在评论中提到了他的答案。

否则,请向 ui-date 项目的 GitHub 提交 PR。修改第172行代码如下:

        $element.on('$destroy', function() {
          $element.datepicker('hide');
          $element.datepicker('destroy');
        });
Run Code Online (Sandbox Code Playgroud)

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