Question

动机

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

约束

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

我尝试了什么

编写一个使用ng-transclude包含ng-view布局结构的指令。由于版本1.2中不再支持ng-transclude与ng-view的互动，因此无法提供帮助。

我如何仍然可以从DOM中排除指令的元素本身？

Answer 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似乎足以证明概念。

Answer 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时需要。}

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

动机

约束

我尝试了什么

2 个答案: