angularjs - 如何在表中放置指令？

Question

我正在尝试使用 angularjs 在表内创建一个指令。我通常可以让它工作，除非我尝试将自定义元素(在我的 jsfiddle 中， <person /> )放入表格内，浏览器通常倾向于将其从表格中拉出，并在元素前面添加。

http://jsfiddle.net/drewsonne/WSnyZ/16/

我期待:

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

问题:

是否可以将自定义元素放置在表格内，或者浏览器会直接滚动这些元素？

---

注释:

我的首要动机是这样我可以拥有类似的东西:

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

Answer 1

如果您小心使用有效的表元素并依赖诸如属性指令之类的东西，它似乎工作得很好: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>'