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

@H_404_0@ 我正在努力思考如何使用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>

我需要< section>成为一个重复元素，但有自己的逻辑和不同的内容。内容和重复次数都取决于业务逻辑。如您所见，将ng-controller和ng-repeat放在< section>上。元素不起作用。然而，插入一个新的DOM节点会是什么，这正是我想要避免的。

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

编辑：只是为了澄清评论中的问题，我试图生成的最终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：解决方案需要可重用。 =)

app.directive('includeReplace',function () { return { require: 'ngInclude',restrict: 'A',/* optional */ link: function (scope,el,attrs) { el.replaceWith(el.children()); } }; });

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

猜你在找的Angularjs相关文章