表内的指令在表外呈现

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>的子项插入。

Answer 2

这种布局对我有用：

<div ng-app="app">
   <table>    
       <tr>
           <td><hello></hello></td>
           <td>Cell 1</td>              
           <td>Cell 2</td>              
           <td>Cell 3</td>              
        </tr>
   </table>
</div>