如何在 AngularJS 中生成的模板中添加静态 HTML？

Question

有没有办法在生成的模板中添加静态 HTML？

我有那个代码：

<test></test>
<test></test>

<script>
var app = angular.module("myApp", []);
app.directive("test", function() {
    return {
        template:
        '<div class="wrapper">' +
        '<div class="content">' +
        '</div>' +
        '</div>'
    };
});
</script>

...然后，我想<p>foo</p>在 first 内添加（见下面的黄色注释）<content>，但不是在 second 内。所以，输出应该是：

<test>
    <div class="wrapper">
        <div class="content">
            foo
        </div>
    </div>
</test>

<test>
    <div class="wrapper">
        <div class="content">
        </div>
    </div>
</test>

我该怎么做？

jsFiddle在评论中被问到。

注意：这只是 SO 示例。在实际代码中，应该添加更复杂的HTML标记，而不是简单的<p>foo</p>. 例如，它可以添加如下内容：<div class="..."><p>...</p><p>...</p></div>。或者，也许是一些 HTML 表格。这就是我想要的。

Answer 1

您可以在此处使用ngTransclude。

你可以这样定义你的指令：

var app = angular.module("myApp", []);
app.directive("test", function() {
    return {
        transclude: true,
        template:
        `<div class="wrapper">
            <div class="content">
                <ng-transclude></ng-transclude>
            </div>
        </div>`
    };
});

然后在您的 HTML 中，您将拥有：

<test>
    <p>foo</p>
</test>
<test></test>

并且<p>foo</p>将自动插入ng-transclude模板中的元素内。

有关AngularJS 文档的更多信息。