javascript - Angular 自定义指令模板行为

Question

我在 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 不同

http://jsbin.com/iMezAFa/168/edit

Answer 1

因为您已替换 false，所以它将模板放入容器元素内。你不能有两个<td>位于 <td> 内，这只是无效的标记。但你可以有两个<divs>里面 <td> .