angularjs - 表内的指令呈现在表外

Question

我有一个具有隔离范围的指令，如下所示:

.directive('hello', function() {

    return {
      restrict: 'E',
      replace: true,
      template: '<h1>Hello Directive</h1>',
      scope: {}
    };

});

如果我将该指令放入表中，奇怪的是，即使用作属性，该指令也会呈现在表外:

<table>    
  <tr>
    <hello></hello>

    <td>Cell 1</td>             
    <td>Cell 2</td>             
    <td>Cell 3</td>             
  </tr>
</table>

有什么解决办法吗？

我创建了一个 Codepen 来演示这一点:http://codepen.io/jviotti/pen/AtnzJ/ .

编辑:我尝试将 h1 包装在 td 中。它仍然呈现在表格之外:

Answer 1

缺少 <td>标签包裹元素， <h1>不能直接作为 <tr> 的子项插入.