AngularJs 指令在页面上创建固定 div答案

【问题标题】：AngularJs directive create fixed div on pageAngularJs 指令在页面上创建固定 div
【发布时间】：2018-06-04 13:52:36
【问题描述】：

我目前正在使用指令在 AngularJS 中开发文档树。它是作为组件的页面的一部分，并且相对于当前页面上的任何其他组件放置。

作为文档树的一部分，我有一个在选择文件时显示的版本模式，显示其信息和文件的可用版本。

但是这个modal需要固定在屏幕上，这样用户就不需要滚动到顶部才能看到了。

但由于模态是文档树组件的一部分，仅将其设置为固定并不能实现这一点。它只是将其设置为相对于指令固定。

// This does not work.
.version-modal {
  position: fixed;
  top: 5vh;
  right: 2vw;
  bottom: 5vh;
  width: 480px;
}

如何通过指令在 div 上设置固定位置，该指令可以嵌套在具有相对位置和大小的多级 dom 对象下？如果我通过浏览器工具将模态 div 作为子级移出到

，它会起作用，但是通过代码这样做会破坏应用程序。

let bodyDiv = document.getElementById('body-container');
let versionDiv = document.getElementById('version-modal');
bodyDiv.appendChild(versionDiv);

据我了解，这样做会导致 div 失去与 $scope 的连接，并且所有函数和成员都会丢失。

【解决方案1】：

固定定位应该不管元素在 DOM 层次结构中的什么位置都可以工作。有一个 jsfiddle 或类似的东西来看看这个问题会很有用。或者，元素的 HTML 会很有用。

您的 CSS 将 .version-modal 作为一个类引用，但您成功地使用 document.getElementById('version-modal') 引用了模式。您的元素是否具有version-modal 类属性以及version-modal id 属性？

您可能只需将class="version-modal" 添加到您的模态框，或将您的 CSS 规则更改为：

#version-modal {
  position: fixed;
  top: 5vh;
  right: 2vw;
  bottom: 5vh;
  width: 480px;
}

【讨论】：

是的，对不起。我将 ID 和类设置为相同。这是因为尝试以编程方式移动 div 是一种快速修复。希望我不需要它。
我认为可能是这样，只是想检查一下！老实说，我不明白为什么您的代码不起作用。如果你能得到一个演示这个问题的 jsfiddle，那么我会看看。另一件要检查的事情：检查开发工具中的元素并确保它的位置实际上是fixed。如果您使用其他库，它们可能会覆盖您的 CSS 规则。