使用 nginclude 时避免使用额外的 DOM 节点 [英] Avoid using extra DOM nodes when using nginclude

问题描述

我正在努力思考如何让 ng-include 不使用额外的 DOM 元素，因为我正在从纯 HTML 演示构建一个有角度的应用程序.我正在使用非常纤薄的 HTML 和完全开发的、与 DOM 紧密耦合的 CSS(从 SASS 构建)，而重构是我想不惜一切代价避免的事情.

实际代码如下:

<标题ng-controller="HeaderController"数据 ng-class="headerType"data-ng-include="'/templates/base/header.html'"></标题><节ng-controller="子标题控制器"data-ng-class="subheaderClass"ng-repeat="子标题中的子标题"data-ng-include="'/templates/base/subheader.html'"></节>

我需要

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

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

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

<小时>

编辑:只是为了澄清评论中的要求，我尝试生成的最终 HTML 是:

<header>...</header><section class="submenuX">来自控制器 A 和模板 B 的一些内容(例如 <ul>...</ul>)</节><section class="submenuY">来自相同控制器 A 和模板 B 的不同内容(例如，<div>...</div>)</节><section class="submenuZ">...(重复次数在控制器 A 中定义，例如通过某些服务)</节><div>...</div>

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

但基本上，底层问题是:有没有办法透明地包含模板的内容，而不使用 DOM 节点?

<小时>

EDIT2:解决方案需要可重复使用.=)

解决方案

其他一些答案建议使用 replace:true，但请记住 replace:true 在模板被标记为弃用.

相反，在类似问题的答案中，我们找到了替代方案:它允许您编写:>

<div ng-include src="dynamicTemplatePath" include-replace></div>

自定义指令:

app.directive('includeReplace', function () {返回 {要求:'ngInclude'，限制:'A'，/* 可选 */链接:功能(范围，EL，属性){el.replaceWith(el.children());}};});

(从另一个答案中剪切'n'粘贴)

I'm struggling to wrap my mind around how to have an ng-include not use an extra DOM element as I'm building an angular app from a plain-HTML demo. I'm working with pretty slim HTML with fully developed, tightly DOM-coupled CSS (built from SASS) and refactoring is something I want to avoid at all costs.

Here's the actual code:

<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>

I need <section> to be a repeating element but have its own logic and different content. Both, content and number of repetitions are dependent on business logic. As you can see, putting the ng-controller and the ng-repeat on the <section> element will not work. What would, however, is to insert a new DOM node, which is what I'm trying to avoid.

What am I missing out? Is this best practice or is there a better way?

---

EDIT: just to clarify as asked in comments, the final HTML I'm trying to generate would be:

<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>

The reason I want to use the same template B (subheader.html), is for code cleanliness. I conceive subheader.html to have some kind of ng-switch in order to return dynamic content.

But basically, the underlaying quiestion is: is there a way to include the contents of a template transparently, without using a DOM node?

---

EDIT2: The solution needs to be reusable. =)

解决方案

Some of the other answers suggest replace:true, but keep in mind that replace:true in templates is marked for deprecation.

Instead, in an answer to a similar question, we find an alternative: It allows you to write:

<div ng-include src="dynamicTemplatePath" include-replace></div>

Custom Directive:

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

(cut'n'paste from the other answer)

这篇关于使用 nginclude 时避免使用额外的 DOM 节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！