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)
希望这能解释这个问题.
您可以挂钩$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...
| 归档时间: |
|
| 查看次数: |
429 次 |
| 最近记录: |