使用 nginclude 时避免使用额外的 DOM 节点

Question

我正在努力思考如何让 ng-include 不使用额外的 DOM 元素，因为我正在从纯 HTML 演示构建角度应用程序。我正在使用非常纤薄的 HTML 和完全开发的、紧密 DOM 耦合的 CSS（由 SASS 构建），并且我想不惜一切代价避免重构。

这是实际代码：

<div id="wrapper">
    <header
        ng-controller="HeaderController"
        data-ng-class="headerType"
        data-ng-include="'/templates/base/header.html'">
    </header>
    <section
        ng-controller="SubheaderController"
        data-ng-class="subheaderClass"
        ng-repeat="subheader in subheaders"
        data-ng-include="'/templates/base/subheader.html'">
    </section>
    <div
        class="main"
        data-ng-class="mainClass"
        data-ng-view>
    </div>
</div>

我需要

是一个重复的元素，但有自己的逻辑和不同的内容。内容和重复次数都取决于业务逻辑。如您所见，将 ng-controller 和 ng-repeat 放在

元素上是行不通的。然而，插入一个新的 DOM 节点，这是我试图避免的。

我错过了什么？这是最佳做法还是有更好的方法？

---

编辑：只是按照 cmets 的要求澄清，我要生成的最终 HTML 将是：

<div id="wrapper">
    <header>...</header>
    <section class="submenuX">
        some content from controller A and template B (e.g. <ul>...</ul>)
    </section>
    <section class="submenuY">
        different content from same controller A and template B (e.g. <div>...</div>)
    </section>
    <section class="submenuZ">
        ... (number of repetitions is defined in controller A e.g. through some service)
    </section>

    <div>...</div>
</div>

我想使用相同的模板 B (subheader.html) 的原因是为了代码简洁。我认为 subheader.html 有某种 ng-switch 以返回动态内容。

但基本上，潜在的问题是：有没有办法在不使用 DOM 节点的情况下透明地包含模板的内容？

---

EDIT2：解决方案需要可重复使用。 =)

Answer 1

您可以创建自定义指令，使用templateUrl 属性链接到模板，并将replace 设置为true：

app.directive('myDirective', function() {
  return {
    templateUrl: 'url/to/template',
    replace: true,
    link: function(scope, elem, attrs) {

    }
  }
});

这将包括模板原样，没有任何包装元素，没有任何包装范围。

Answer 2

编辑：经过一些研究并为了完整起见，我添加了一些信息。自 1.1.4 起，以下工作：

app.directive('include',
    function () {
        return {
            replace: true,
            restrict: 'A',
            templateUrl: function (element, attr) {
                return attr.pfInclude;
            }
        };
    }
);

用法：

<div include="'path/to/my/template.html'"></div>

但是，有一个问题：模板不能是动态的（例如，通过作用域传递变量，因为 $scope 或任何DI 在 templateUrl 中无法访问 - 请参阅this issue），只能传递一个字符串（就像上面的 html sn-p 一样）。为了绕过这个特定问题，这段代码应该可以解决问题（感谢this plunker）：

app.directive("include", function ($http, $templateCache, $compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            var templateUrl = scope.$eval(attributes.include);
            $http.get(templateUrl, {cache: $templateCache}).success(
                function (tplContent) {
                    element.replaceWith($compile(tplContent.data)(scope));
                }
            );
        }
    };
});

用法：

<div include="myTplVariable"></div>