在 table 中嵌套一个指令

Question

这可能吗？我希望能够根据用户输入整齐地换出一个 table 主体，所以我只是把这个小 * 测试放在一起看它是否有效，但它加载所有不稳定，主体在table 本身在 DOM 中，尽管我将它适当地嵌套在我的 html 中。所以我的问题是： 1）这是什么行为？和 2) 我可以按照我的方式实现我想要的吗？

*simple fiddle

html:

<div ng-app="myApp" ng-controller="myController">
<table class="table">
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
 </thead>
 <my-directive></my-directive><!--  this should be the tbody -->
 <tfoot>
  <tr>
     <td>Sum</td>
     <td>0</td>
  </tr>
 </tfoot>
</table> 
</div>

js:

var app = angular.module("myApp", []);

app.directive("myDirective", function () {
    return {
        restrict: 'E',
        template: '<tbody><tr><td>January</td><td>0</td></tr><tr><td>February</td><td></td></tr></tbody>',

    };
});

Answer 1

您当前正在 <my-directive></my-directive> 元素内呈现标记，这会扰乱 table 布局。

相反，将您的指令更改为基于属性的指令并将其放置在 <tbody> 元素上，替换内容..

模板

</thead>
<tbody my-directive></tbody><!--  this should be the tbody -->
<tfoot>

指令

return {
    restrict: 'A',
    template: '<tr><td>January</td><td>0</td></tr><tr><td>February</td><td></td></tr>'
};

查看工作 fiddle。

在 table 中嵌套一个指令

Nesting a directive inside of a table

directive

angularjs