Question

我使用带有选项datepicker-append-to-body="true"的Angular UI Bootstrap datepicker弹出窗口。因此弹出窗口呈现给<body>。在我的特定场景中，我需要删除包含datepicker的DOM元素。删除元素后（使用element.remove()）弹出窗口将保留在正文中。我该如何删除datepicker，以便弹出窗口也被正确删除？

以下是了解问题的plunker： close to 100 ns

我知道在Angular中删除这样的元素不是正确的方法，但我正在努力将现有的jQuery小部件与Angular集成，这是在现有代码中完成的。我试图找到解决这个问题的方法。

感谢任何帮助。

修改

抱歉，我认为需要一些其他信息来澄清案例：

正如我所提到的，我将一个jQuery插件与Angular集成。这是网格。网格可以有编辑行。网格用户可以在编辑行中放置Angular UI Datepicker来编辑日期字段。用户点击Save（或Cancel）后，编辑行将被$element.remove()删除。所以这发生在外部lib代码中。我能做的是修补删除代码并调用一些清理代码。问题是这个清理代码是什么，所以它将清理datepicker。

遗憾的是，

ng-if不是一个选项，因为修补代码对单元格的内容和范围的字段一无所知。此代码是通用的，而datepicker由网格用户放在单元格中。实际上它可能是任何其他小部件。

Answer 1

您可以使用ng-if删除或添加回您的HTML。这是一个plunker：

$scope.showDatePanel = true;
$scope.removePanel = function() {
    $scope.showDatePanel = false;
  }

你的HTML中的

：

<div id="panelToBeRemoved" ng-if="showDatePanel" class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" datepicker-append-to-body="true" is-open="popup.opened" />
        </p>
      </div>
    </div>

希望它有所帮助。

Answer 2

uib-datepicker 使用 ng-if 。这意味着，如果你在 is-open 属性中指定 true ，则动态追加到你的身体中，如果指定 false ，那么它会在你的身体标签中自动销毁。因此，当您按删除元素按钮时，请指定 is-open false。更改 example.js 文件 - ＆gt;

$scope.open = function() {
    if($window.document.getElementById("panelToBeRemoved") != null){
      $scope.popup.opened = true;
    }
};

删除渲染到正文的Angular UI Bootstrap datepicker弹出窗口

2 个答案: