指令表裏面呈現的外部表

我有這樣的孤立範圍指令：指令表裏面呈現的外部表

.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>

enter image description here

任何變通辦法？

我創建了一個Codepen來演示這個：http://codepen.io/jviotti/pen/AtnzJ/。

編輯：我試着在td包裝h1。它仍然呈現表外：

enter image description here

來源

2014-04-09 jviotti

耶不創建一個自定義元素，使用類似'' –

它缺少<td>標籤包裝的元素，<h1>不能直接插入爲<tr>一個孩子。

來源

2014-04-09 19:42:14

我裹在'td'的'h1'。該指令仍呈現在表格之外。在codepen中測試。 – jviotti

我想你已經在指令模板中完成了它。在渲染過程中，瀏覽器首先嚐試在angular啓動之前創建一個有效的HTML。另一種可能性是將指令用作屬性或註釋，而不是元素。如有疑問，請檢查http://codepen.io/anon/pen/xBLyh/ –

這種佈局對我的作品：

<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>

來源

2014-04-09 19:54:31 arg20

指令表裏面呈現的外部表

回答

相關問題