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

Question

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

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

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

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

指令HTML：

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

现在，当我尝试访问指令元素时，我想访问类＆＃39; overlay＆＃39;

Answer 1

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

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

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

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

Here's a fiddle展示了这种方法。