javascript - 如何在 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> (见下方黄色注释)先在里面<content> ，但不在第二位。所以，输出应该是:

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

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

我该怎么做？

jsFiddle如评论中所述。

Note: This is just SO example. In the real code, it should be added more complex HTML markup, not simple <p>foo</p>. For example, it may be added something like: <div class="..."><p>...</p><p>...</p></div>. Or, maybe, some HTML table. That is what I want.

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 documentation 的更多信息.