Angularjs 为什么我的指令会得到一个“Q”；“空的”；el[0]的绑定客户端矩形？

我正在编写一个指令，试图将附加到页面主体的元素放置在使用该指令的元素下面。我的研究表明，获取要显示的元素的实际顶部和左侧，我可以使用

el[0].getBoundingClientRect（）

，但是，当我在指令中使用它时，我会得到一个“blank”rect引用（所有属性都设置为0）。为了确保这一点，我在指令中执行了

console.log（el[0]）

，然后在控制台窗口中手动选择相同的元素来比较它们，看看是否可以在控制台窗口中获得边界矩形，我可以。以下是相关控制台线路：

来自指令：

console.log(el[0]);
-> <div tabindex=​"1" class=​"form-control border-radius ng-binding ng-isolate-scope" time-for=​"schedule.monday.startTime" id="div">​1:29 PM​</div>​
console.log(el[0].getBoundingClientRect());
-> ClientRect {height: 0, width: 0, left: 0, bottom: 0, right: 0…}

document.getElementById("div");
-> <div tabindex=​"1" class=​"form-control border-radius ng-binding ng-isolate-scope" time-for=​"schedule.monday.startTime" id=​"div">​1:29 PM​</div>​
document.getElementById("div").getBoundingClientRect();
-> ClientRect {height: 34, width: 90, left: 618, bottom: 347, right: 708…}

console.log（el[0]）；
-> ​下午1:29​​
console.log（el[0].getBoundingClientRect（））；
->ClientRect{height:0，width:0，left:0，bottom:0，right:0…}

从控制台：

console.log(el[0]);
-> <div tabindex=​"1" class=​"form-control border-radius ng-binding ng-isolate-scope" time-for=​"schedule.monday.startTime" id="div">​1:29 PM​</div>​
console.log(el[0].getBoundingClientRect());
-> ClientRect {height: 0, width: 0, left: 0, bottom: 0, right: 0…}

document.getElementById("div");
-> <div tabindex=​"1" class=​"form-control border-radius ng-binding ng-isolate-scope" time-for=​"schedule.monday.startTime" id=​"div">​1:29 PM​</div>​
document.getElementById("div").getBoundingClientRect();
-> ClientRect {height: 34, width: 90, left: 618, bottom: 347, right: 708…}

document.getElementById（“div”）；
-> ​下午1:29​​
document.getElementById（“div”）.getBoundingClientRect（）；
->ClientRect{高：34，宽：90，左：618，下：347，右：708…}

---

是否有原因使我无法在指令中获得明显的有效矩形引用？

getBoundingClientRect

如果元素或其祖先之一的样式设置为

display:none

，则返回零。您可以使用

可见性：hidden

仍将其隐藏，但要获得适当的大小

此外，如果元素中有浮动元素，则高度可能为零

console.log（document.querySelector（'a'）.getBoundingClientRect（））；
console.log（document.querySelector（'#b'）.getBoundingClientRect（））；
console.log（document.querySelector（'#c'）.getBoundingClientRect（））；
console.log（document.querySelector（'#d'）.getBoundingClientRect（））
参见控制台
隐藏位
隐藏位
隐藏位
漂浮
漂浮