使用nginclude时，避免使用额外的DOM节点 [英] Avoid using extra DOM nodes when using nginclude
问题描述
我挣扎环绕我的心里怎么有NG-包括因为我从纯HTML的演示构建一个角度应用不使用额外的DOM元素。我与pretty苗条HTML工作与全面发展，紧紧DOM耦合CSS（SASS从建）和重构是我要不惜一切代价避免。
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.
下面是实际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>
我需要的＆所述;节＆gt; 的是一个重复元素，但有其自己的逻辑和不同的内容。既，内容和重复次数取决于业务逻辑。正如你所看到的，把NG-控制器上的＆LT的NG-重复;节＆gt; 的元素将无法工作。会是什么，但是，是插入一个新的DOM节点，这正是我想避免的。
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?
修改：我只想澄清的问意见，我想生成最终的HTML是：
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>
我想使用相同的模板B（subheader.html）的原因，是code清洁度。我怀孕subheader.html有某种NG-开关，以便返回动态内容。
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.
但基本上，下衬quiestion是：是有办法包括模板的内容透明，不使用DOM节点的
But basically, the underlaying quiestion is: is there a way to include the contents of a template transparently, without using a DOM node?
EDIT2 ：该解决方案必须是可重复使用的。 =）
EDIT2: The solution needs to be reusable. =)
推荐答案
编辑：经过一番研究和完整性的考虑，我已经添加了一些信息。自从1.1.4，以下工作：
After some research and for the sake of completeness, I've added some info. Since 1.1.4, the following works:
app.directive('include',
function () {
return {
replace: true,
restrict: 'A',
templateUrl: function (element, attr) {
return attr.pfInclude;
}
};
}
);
用法：
Usage:
<div include="'path/to/my/template.html'"></div>
有，然而，有一个问题：在模板不能是动态的（如在，传递变量通过范围，因为$范围，或者任何对于这个问题DI ，是不是在templateUrl访问 - 请参阅这个问题），只字符串可以传递（就像HTML上面的代码片段）。要绕过这一特定问题，这块code的应该做的伎俩（荣誉来这个plunker ）：
There is, however, one gotcha: the template cannot be dynamic (as in, passing a variable through scope because $scope, or any DI for that matter, is not accessible in templateUrl - see this issue), only a string can be passed (just like the html snippet above). To bypass that particular issue, this piece of code should do the trick (kudos to 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));
}
);
}
};
});
用法：
Usage:
<div include="myTplVariable"></div>
这篇关于使用nginclude时，避免使用额外的DOM节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
