[英]Angular Custom Directive template behavior
我在使用角度自定义指令时遇到问题。
JS
app.directive('myElement', function () {
return {
scope: {
item: '=i'
},
restrict: 'EA',
replace: false,
template: '<td>Name: {{ item.name }}</td> <td>Age: {{ item.age }}</td>'
};
的HTML
<div ng-controller="MyCtrl">
<table class="table table-hover" border=1>
<tr ng-repeat="p in people">
<td my-element i="p"></td>
</tr>
</table>
此模板未呈现为2个“ TD”标记,它仅呈现了内部绑定数据的html中的“ TD my-element”。
如果我将模板更改为
template: '<div>Name: {{ item.name }}</div> <div>Age: {{ item.age }}</div>'
该页面在“ TD my-element”中显示2 div“ DIV”
如果我使replace = false,一切都会消失。
TD为什么表现与DIV不同
因为您具有replace false,所以它将模板放入容器元素中。 <td>
不能有两个<td>
<td>
,这只是无效的标记。 但是您可以在<td>
包含两个<divs>
<td>
。
尝试按照以下步骤添加它。
template: '<table><tr><td>Name: {{ item.name }}</td> <td>Age: {{ item.age }}</td></tr></table>'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.