关于angularjs:表内的指令在表外渲染

Directive inside table is rendered outside table

我有一个这样的独立范围指令:

1
2
3
4
5
6
7
8
9
10
.directive('hello', function() {

    return {
      restrict: 'E',
      replace: true,
      template: 'Hello Directive',
      scope: {}
    };

});

如果我将该指令放在一个表格中,奇怪的是,该指令会呈现在表格之外,即使用作属性:

1
2
3
4
5
6
7
8
9
<table>    
  <tr>
    <hello></hello>

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

enter

  • 是的,不要创建自定义元素,使用类似 <td hello></td> 的东西


缺少一个包裹元素的 <td> 标签,一个 不能作为 <tr> 的子元素直接插入。

  • 我已将 h1 包裹在 td 中。该指令仍然呈现在表格之外。在 Codepen 中测试。
  • 我猜你已经在指令模板中完成了。在渲染过程中,浏览器首先尝试在 Angular 进入阶段之前生成有效的 HTML。另一种可能性是将指令用作属性或注释,而不是元素。如果有疑问,请检查这个 codepen.io/anon/pen/xBLyh


这个布局适合我:

1
2
3
4
5
6
7
8
   <table>    
       <tr>
           <td><hello></hello></td>
           <td>Cell 1</td>              
           <td>Cell 2</td>              
           <td>Cell 3</td>              
        </tr>
   </table>