时间戳

首页 > 解决方案 > 访问父控制器中指令的html内容

javascript - 访问父控制器中指令的html内容

问题描述

我有一个叠加层，我通过访问 html 内容并获取高度、宽度等手动设置它的位置。

现在，我已将叠加层转换为指令。但我无法访问指令本身的 html 内容来更新位置。

我尝试了什么：我尝试在指令中使用 replace:true。但是当我尝试访问 div - 我仍然得到指令元素而不是指令 html 内容。例如：我的指令：

<my-dir somevalue='something'>
</my-dir>

指令 HTML：

<div class="overlay">
<span>{{somevalue}}</span>
</div>

现在，当我尝试访问指令元素时，我想访问“覆盖”类

标签： javascripthtmlangularjsangularjs-directive

解决方案

首先，在您的指令模板中，您可能应该指的是somevalue，而不是something，因为大概somevalue是在指令范围内设置的内容。

然后要访问.overlay子元素，在指令的link函数中，您可以使用querySelector指令的本机 DOM 元素上的方法，如下所示：

link: function (scope, el, attrs) {
  var overlayElement = el[0].querySelector('.overlay');
}

el传递给link函数的是 jqLit​​e-wrapped 指令元素，因此可以获得el[0]本机 DOM 元素。

这是一个演示这种方法的小提琴。

推荐阅读