有没有办法将一个模板插入另一个模板？
Note: This question is an extension of this one: How to add static HTML inside generated template in AngularJS?
我有一个 Angular Directive(指令)，它将插入 <div class="wrapper">...</div> (下图中红色部分)在表格的左栏内，以及 <p>bar</p>在右栏内。
图形输出:
这里是 the plunk .
文件如下:
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>
<!-- ... -->
这是怎么做到的？
最佳答案
不确定我是否完全理解您的用例(不要误会，我不是以英语为母语的人，但我觉得您的描述可能更清楚)。
但是我相信你所需要的只是另一个指令。
我整理了一个 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，因此多槽嵌入有效)。
关于javascript - 将一个模板插入另一个模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35900818/