如何排除指令自己的元素？答案

【问题标题】：How to exclude the directive's own element?如何排除指令自己的元素？
【发布时间】：2014-02-07 11:38:52
【问题描述】：

动机

创建一个直接下降 body 元素的布局。布局应该用脚手架模板包裹ng-view。

约束

布局模板将包含任意内容（并且可能包含任意数量的根元素，因此replace: true 在这里不起作用）。

我尝试了什么

编写利用ng-transclude 将ng-view 与布局结构包装起来的指令。由于 1.2 版似乎不再支持 ng-transclude 与 ng-view 的交互，因此这里没有帮助。

我怎样才能从 DOM 中排除指令的元素本身？

【问题讨论】：

标签： javascript angularjs layout angularjs-directive

【解决方案1】：

我们可以利用链接功能将指令的目标元素替换为模板的内容，如下：

angular.module('myApp')
    .directive('scaffold', function () {
        return {
            templateUrl: 'views/scaffold-template.html',
            restrict: 'EA',
            link: function (scope, element, attrs) {
                // exclude the directive's own element
                element.replaceWith(element.contents());
            }
        };
    });

当模板必须有任意内容，或者根本不能有一个根元素时，这会派上用场。

由于无论如何都会在所有指令的实例中进行此操作，因此使用compile 函数可能更合适，但link 似乎足以证明概念。

【讨论】：

为什么不直接使用replace: true？
@Stewie, replace: true 只允许一个根元素。我已经更新了问题来描述这一点。谢谢。
@Stewie，顺便说一句，令我惊讶（和沮丧）的是，replace 无处可寻in the current version's docs。
指令 api 在较新版本中的 $compile service 中进行了描述。您会在那里找到replace 属性。而且，为什么不简单地将scaffold-template.html 视图包装在简单的<div> 中，就完成了？
@Stewie，只是因为我希望模板是“干净的”。再想一想，您的解决方案要简单得多和更干净。请将此添加为答案，谢谢！

【解决方案2】：

Directive Definition Object 的replace 属性允许您指定指令的模板是替换宿主元素 ({..., replace: true, ...}) 还是仅在其中插入模板（{..., replace: false, ...} - 默认设置）。

因此，在您的情况下，您需要将 replace 设置为 true。

需要注意的一点是，你的指令模板需要有一个根 DOM 节点，否则 Angular 会抛出 “错误：模板必须只有一个根元素”。（这是known limitation）。

如果你的指令模板看起来像这样：

<br />
<span>{{name}}</span>

您需要将其包装在单个根元素中，如下所示：

<span>
  <br />
  <span>{{name}}</span>
<span>

_{注意：仅在使用replace: true时需要。}

【讨论】：

在尝试了这个之后，我意识到这不是我想要的。虽然它会替换模板的元素，但 directive 目标元素仍然存在，因为模板已嵌入其中。我正在寻找一种方法来消除 指令自己的元素。
不确定我是否在关注你。这是一个 plunker 演示 replace:true 如何替换 指令自己的元素。
好吧，我想要实现的是摆脱模板根和指令的目标元素（在 plunkr 中是 <div my-directive>Original content</div>）。所以模板内容（短它的根元素）将位于 body 元素上。也许an updated plunkr 会澄清这一点 - 这里更清楚的是，注入的内容仍然有一个包裹它的span（这不是我的目标）。