Question

我正在使用带有templateURL的指令：

function myDirective() {
  return {
    restrict: 'E',
    replace: false,
    link: function (scope, element, attrs) {
      element[0].style.height = $(window).height() + 'px';
    },
    templateUrl: chrome.extension.getURL('./templates/hn_feed_tpl.html')
  }
}

在我的html中，我插入了这样的指令：

<my-directive></my-directive>

加载的模板非常简单：

<div class="myDiv">
// some code here
</div>

我想从指令代码访问.myDiv div来调整其高度。但是，当我尝试使用element[0]进行调整时，所选元素为<my-directive></my-directive>。如何访问.myDiv div？

非常感谢

Answer 1

当您将replace设置为false时，您的指令会呈现为

<my-directive>
  <div class="myDiv">
  // some code here
  </div>
</my-directive>

导致element指向my-directive DOM元素在这种情况下，您需要访问元素的第一个子元素，例如

element.children()[0].style.height = whatever

将replace设置为true可以避免包装模板元素，只需将指令元素替换为模板中定义的元素即可。在这种情况下，您可以直接使用element，因为它指向模板中定义的元素。

Answer 2

您可以按类选择器选择子项：

element.children(".myDiv")

AngularJS - 从指令访问DOM元素

2 个答案: