Question

让我说我有类似的东西：

<body>
    <section id="page_content">
        <div myDirective></div>
    </section>
</body>

我希望我的AngularJS指令返回：

<body>
    <div id="newDivFromDirective">
        ...with some stuff inside!
    </div>
    <section id="page_content">
        <div myDirective></div>
    </section>
</body>

我目前有：

myAngularApp.directive('myDirective', function() {
    return {
        template: '<div id="newDivFromDirective" style="display: none">' +
        '...with some stuff inside!' +
        '</div>'
    }
});

但这并不能归还我需要的结果。我查看了使用链接 - 但不确定我如何使用带链接的模板然后得到element.parent我猜？

Answer 1

您可以使用Node.insertBefore()函数将元素移动到链接函数中的其他位置。基于上面的结构，您希望它在父元素之前，因此您基本上需要grandParentNode.insertBefore(directiveElemNode,parentNode)。

以下是您可以使用的简化指令代码：

app.directive('myDirective', function() {
  return {
    template: "<div>... some text</div>",
    link: function(scope,elem,attrs) {
      var myParent = elem.parent();
      var newParent = myParent.parent();
      newParent[0].insertBefore(elem[0],myParent[0]);
    }
  };
});

如果你说你不介意它在<section>元素之后，你也可以myParent.after(elem)

Node.insertBefore() - https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore 样本plunker - http://plnkr.co/edit/FD08cP4aj0InJwf8okeC?p=preview

Angular Directive父模板？

1 个答案: