如何將指令放在表格中？

我試圖用angularjs在表內創建一個指令。我通常可以使它工作，除非如果我嘗試在表中放置自定義元素（在我的jsfiddle中，<person />），瀏覽器通常傾向於將它從表中拉出，並且預先添加元素。如何將指令放在表格中？

我期待：

<div ng-app="MyApp" class="ng-scope"> 
    <people class="ng-scope"> 
     <table> 
      <thead><tr><th>Name</th><th>Age</th></tr></thead> 
      <tbody> 
       <person info="personJohn" class="ng-isolate-scope ng-scope ng-binding"> 
        <tr><td>John</td><td>10</td></tr> 
       </person> 
       <person info="personSally" class="ng-isolate-scope ng-scope ng-binding"> 
        <tr><td>Sally</td><td>20</td></tr> 
       </person> 
      </tbody> 
     </table> 
    </people> 
    <person info="{name:'Fred',age:30}" class="ng-isolate-scope ng-scope ng-binding"> 
     <tr><td>Fred</td><td>30</td></tr> 
    </person> 
</div>

，但我發現：

<div ng-app="MyApp" class="ng-scope"> 
    <people class="ng-scope"> 
     <person info="personJohn" class="ng-isolate-scope ng-scope ng-binding"> 
      John10 
     </person> 
     <person info="personSally" class="ng-isolate-scope ng-scope ng-binding"> 
      Sally20 
     </person> 
     <table> 
      <thead><tr><th>Name</th><th>Age</th></tr></thead> 
      <tbody></tbody> 
     </table> 
    </people> 
    <person info="{name:'Fred',age:30}" class="ng-isolate-scope ng-scope ng-binding"> 
     Fred30 
    </person> 
</div>

問題：

是否可以將自定義ELEM在桌子裏面放置什麼東西，或者這個瀏覽器會蒸汽滾動？

注：

我在拱形的動機是爲了讓我能有這樣的：

<year info="data"></year>

該模板是這樣的：

<year> 
    <table ng-repeat="year in data"> 
     <thead><tr><th>Name</th><th>Value</th></tr></thead> 
     <tbody> 
     <tr><th colspan=2>{{year.name}}</th></tr> 
     <quarter ng-repeat="quarter in year.quarters"> 
      <tr><th>{{quarter.name}}</th></tr> 
      <month> 
       <tr><th>{{month.name}}</th></tr> 
       <tr ng-repeat="day in month.days"> 
        <th>{{day.name}}</th> 
        <th>{{day.value}}</th> 
       </tr> 
      </month> 
     </quarter> 
     </tbody> 
    </table> 
</year>

呈現如下所示：

<table> 
     <thead><tr><th>Name</th><th>Value</th></tr></thead> 
     <tbody> 
      <tr><th colspan=2>2013</th></tr> 
      <tr><th>Quarter 1</th></tr> 
      <tr><th>February</th></tr> 
      <tr> 
       <td>01/02/2013</td> 
       <td>$12</td> 
      </tr> 
      <tr> 
       <td>05/02/2013</td> 
       <td>$15</td> 
      </tr> 
      <tr> 
       <td>10/02/2013</td> 
       <td>$17</td> 
      </tr> 
     </tbody> 
</table> 
<table> 
     <thead><tr><th>Name</th><th>Value</th></tr></thead> 
     <tbody> 
      <tr><th colspan=2>2013</th></tr> 
      <tr><th>Quarter 2</th></tr> 
      <tr><th>April</th></tr> 
      <tr> 
       <td>01/04/2013</td> 
       <td>$18</td> 
      </tr> 
      <tr><th>May</th></tr> 
      <tr> 
       <td>01/05/2013</td> 
       <td>$78</td> 
      </tr> 
     </tbody> 
</table>

來源

2013-07-28 Drew

見http://stackoverflow.com/a/16789745/ 2057033 :)。 – Blackhole

嗯... sooo，這意味着我不能這樣做。該死。不管怎樣，謝謝你！ – Drew

如果您小心使用有效的表元素和依靠類似屬性的指令似乎就好了工作：http://jsfiddle.net/Tz83w/1/

'<tr ng-repeat="d in data" info="d"></tr>' 
... 
.directive('info', function() { 
return { 
    restrict: 'A', 
... 
template: '<tr><td>{{info.name}}</td><td>{{info.Age}}</td></tr>'

來源

2013-07-28 21:20:18 lossleader

如何將指令放在表格中？

回答

相關問題