Question

有没有办法将一个模板插入另一个模板？

注意：此问题是此问题的扩展：How to add static HTML inside generated template in AngularJS?

我有一个角度指令，它会在表格左栏内插入<div class="wrapper">...</div>（图中红色），在右栏内插入<p>bar</p>。

图形输出：

以下是文件：

的test.html

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css">

<body ng-app="myApp">

    <sides>
        <side-left>
            <div class="wrapper"><div class="content"><p>foo</p></div></div>
        </side-left>
        <side-right>
            <p>bar</p>
        </side-right>
    </sides>

</body>

app.js

(function(angular) {
    'use strict';

angular.module('myApp', [])
.directive('sides', function(){
    return {
        restrict: 'E',
        transclude: {
            'left': 'sideLeft',
            'right': 'sideRight'
        },

        /* The 1st template */
        template:
        `<table border="0" cellpadding="10" cellspacing="0" width="100%">
            <tr valign="top">
                <td width="50%">
                    <div ng-transclude="left"></div>
                </td>
                <td width="50%">
                    <div ng-transclude="right"></div>
                </td>
            </tr>
        </table>`

    };
})

})(window.angular);

app.css

table {width: 100%}
table, tr, td {border: 1px solid black; border-collapse: collapse}
.wrapper {
    background-color: rgb(245,205,205);
}

这很好用。但是现在，我想改变它的运作方式。

<div class="wrapper">和<div class="content">应该从另一个模板生成，然后插入第一个模板（稍微显示在上面）。

通过这种改变，我可以得到相同的结果HTML和视觉结果（如上图所示），并写下如下内容：

的test.html

    <!-- ... -->

    <sides>
        <side-left>
            <wrapper>
                <p>foo</p>
            </wrapper>
        </side-left>
        <side-right>
            <p>bar</p>
        </side-right>
    </sides>

    <!-- ... -->

怎么可以这样做？

Answer 1

不确定我是否完全理解您的用例（不要采取错误的方式，我不是英语母语人士，但我的印象是您的描述可能更清晰）。

但是我相信你需要的只是另一个指令。

我已经整理了JSBin，展示了它们如何组合在一起。以下是相关部分：

指令wrapper

.directive('wrapper', function(){
    return {
        restrict: 'E',
        transclude: true,

        /* The 2nd template */
        templateUrl:
        '/tpl-wrapper.html'

    };
})

wrapper

的模板

<div class="wrapper">
   <div class="content">
       <div ng-transclude />
   </div>
</div>

主要HTML

<sides>
    <side-left>
        <wrapper>
            <p>foo</p> 
        </wrapper>
    </side-left>
    <side-right>
        <p>bar</p>
    </side-right>
</sides>

几点说明：

我已将指令HTML分离为script-templates，因为这使得Javascript部分更简洁，更易于阅读。您当然可以将它们复制回来并将templateUrl更改为template。
wrapper指令与sides指令的作用相同，但只需要一个插槽用于转换。无论你写什么内容都会被复制回生成的HTML
生成的HTML仍包含<sides>或<side-left>等标记。我不知道是否需要（毕竟HTML5允许），但我会尝试将它们移到<div class="sides">和<div class="side-left">

如果您想修复最后一点，可以使用link - 函数替换异常标记：

link: function(scope, el, attr, ctrl, transclude) {
     el.replaceWith(el.children());
}

我准备a second version of my JSBin为<sides>和<wrapper>显示了这一点（并且还使用了Angular 1.5，因此多插槽转换有效）。

将一个模板插入另一个

1 个答案: