我在 Angular 自定义指令方面遇到问题。
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”,其中包含内部绑定(bind)数据。
如果我将模板更改为
template: '<div>Name: {{ item.name }}</div> <div>Age: {{ item.age }}</div>'
页面在“TD my-element”内呈现 2 个 div“DIV”
如果我设置replace=false,一切都会消失。
为什么 TD 的行为与 DIV 不同
最佳答案
因为您已替换 false,所以它将模板放入容器元素内。你不能有两个<td>
位于 <td>
内,这只是无效的标记。但你可以有两个<divs>
里面 <td>
.
关于javascript - Angular 自定义指令模板行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21586545/