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

Question

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

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

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

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

指令HTML:

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

现在，当我尝试访问指令元素时，我想访问 class 'overlay'

Answer 1

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

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

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

传递给 link 函数的 el 是 jqLite 包装的指令元素，因此 el[0] 为您提供原生 DOM 元素。

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

Access the html content of directive in parent controller