如何添加静态HTML生成的模板里面AngularJS？ [英] How to add static HTML inside generated template in AngularJS?

问题描述

有没有办法来添加生成的模板里面静态HTML？

我有code：

 ＆LT;试验＆gt;＆LT; /试验＆gt;
＆LT;试验＆gt;＆LT; /试验＆gt;＆LT;脚本＆GT;
VAR应用= angular.module（对myApp，[]）;
app.directive（测试，函数（）{
    返回{
        模板：
        '＆LT; D​​IV CLASS =包装＆GT;' +
        '＆LT; D​​IV CLASS =内容＆GT;' +
        '＆LT; / DIV＆GT;' +
        '＆LT; / DIV＆GT;'
    };
}）;
＆LT; / SCRIPT＆GT;
 

...然后，我想补充＆LT; P＆GT;富＆LT; / P＆gt;首先在（见下面黄色注）LT ;内容＆GT; ，但里面没有第二个。因此，输出应该是：

 ＆LT;试验＆gt;
    ＆LT; D​​IV CLASS =包装＆GT;
        ＆LT; D​​IV CLASS =内容＆GT;
            富
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /试验＆gt;＆LT;试验＆gt;
    ＆LT; D​​IV CLASS =包装＆GT;
        ＆LT; D​​IV CLASS =内容＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /试验＆gt;
 

我该怎么办呢？

的jsfiddle 作为aksed中的注释。

  

请注意：这仅仅是如此的例子。在现实code，应该增加更多的复杂的HTML标记，而不是简单的＆LT; P＆GT;富＆LT; / P＆GT; 。例如，它可以添加类似：＆LT; D​​IV CLASS =...＆GT;＆LT; P＆GT; ...＆LT; / P＆GT;＆LT; P＆GT; ...＆LT; / p＆GT;＆LT; / DIV＆GT; 。或者，也许，一些HTML表格。这就是我想要的。

解决方案

您可以使用 ngTransclude 的在这里。

您会这样定义你的指令：

  VAR应用= angular.module（对myApp，[]）;
app.directive（测试，函数（）{
    返回{
        transclude：真实，
        模板：
        `＆LT; D​​IV CLASS =包装＆GT;
            ＆LT; D​​IV CLASS =内容＆GT;
                ＆LT; NG-transclude＆GT;＆LT; / NG-transclude＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;`
    };
}）;
 

然后在你的HTML，你会：

 ＆LT;试验＆gt;
    ＆所述p为H.;富＆下; / P＆GT;
＆LT; /试验＆gt;
＆LT;试验＆gt;＆LT; /试验＆gt;
 

以及＆LT; P＆GT;富＆LT; / P＆GT; 将自动 NG-transclude 元素中插入在你的模板。

在 AngularJS文档的更多信息。

Is there a way to add static HTML inside generated template?

I have that code:

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

... And then, I want to add <p>foo</p> (see yellow note below) inside first <content>, but not inside second. So, the output should be:

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

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

How I can do it?

jsFiddle as aksed in the comments.

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.

解决方案

You can use ngTransclude here.

You would define your directive like this:

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>`
    };
});

Then in your HTML, you would have:

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

And the <p>foo</p> will be inserted automatically inside the ng-transclude element in your template.

More information on AngularJS documentation.

这篇关于如何添加静态HTML生成的模板里面AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！