UI Bootstrap 日期选择器附加到 body 时重复
UI Bootstrap datepicker duplicated when appended to body
我在 ui.grid
内的过滤器 header 模板中使用 ui.bootstrap.datepickerPopup
。这让我可以按日期过滤行。我在网格菜单中也有一个按钮,可以切换 grid.options.enableFiltering
.
由于 ui-grid
的对齐问题,我将日期选择器的 datepicker-append-to-body
设置为 true。第一次启用过滤时,一切正常。但是,当我禁用过滤并 re-enable 它时,我得到了重复的日期选择器。
问题是这样的:
我认为问题在于每次启用过滤器时,以下 div
都会附加到 DOM 并且在禁用过滤器时永远不会删除。
<div uib-datepicker-popup-wrap=""
ng-model="date"
ng-change="dateSelection(date)"
template-url="uib/template/datepickerPopup/popup.html"
class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled"
>
<!-- ngIf: isOpen -->
</div>
这是一个简化的插件: http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
如果我只在 Time Range
过滤器 header.
中使用一个日期选择器,我会遇到同样的问题
非常感谢任何想法!不想使用 jQuery.
我不知道为什么会发生这种情况,但没有 jQuery 的解决方案是在使用 document.querySelectorAll()[=12 触发过滤器切换时删除弹出窗口=]
var elements = document.querySelectorAll("div[uib-datepicker-popup-wrap]");
Array.prototype.forEach.call(elements, function(node) {
node.parentNode.removeChild(node);
});
笨蛋 here
我在 ui.grid
内的过滤器 header 模板中使用 ui.bootstrap.datepickerPopup
。这让我可以按日期过滤行。我在网格菜单中也有一个按钮,可以切换 grid.options.enableFiltering
.
由于 ui-grid
的对齐问题,我将日期选择器的 datepicker-append-to-body
设置为 true。第一次启用过滤时,一切正常。但是,当我禁用过滤并 re-enable 它时,我得到了重复的日期选择器。
问题是这样的:
我认为问题在于每次启用过滤器时,以下 div
都会附加到 DOM 并且在禁用过滤器时永远不会删除。
<div uib-datepicker-popup-wrap=""
ng-model="date"
ng-change="dateSelection(date)"
template-url="uib/template/datepickerPopup/popup.html"
class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled"
>
<!-- ngIf: isOpen -->
</div>
这是一个简化的插件: http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
如果我只在 Time Range
过滤器 header.
非常感谢任何想法!不想使用 jQuery.
我不知道为什么会发生这种情况,但没有 jQuery 的解决方案是在使用 document.querySelectorAll()[=12 触发过滤器切换时删除弹出窗口=]
var elements = document.querySelectorAll("div[uib-datepicker-popup-wrap]");
Array.prototype.forEach.call(elements, function(node) {
node.parentNode.removeChild(node);
});
笨蛋 here