Angularjs 将指令嵌套在表中

这可能吗？我希望能够根据用户输入整洁地交换出一个表体，所以我只是将这个小小的*测试放在一起，看看它是否能工作，但它的加载都是不可靠的，表体位于DOM中表本身的前面和外部，即使我将它适当地嵌套在html中。因此，我的问题是： 1） 这种行为是怎么回事？和 2） 我能以我的方式实现我想要的吗

*

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>$180</td>
  </tr>
 </tfoot>
</table> 
</div>

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

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

    };
});

月
储蓄
总和
$180

js:

<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>$180</td>
  </tr>
 </tfoot>
</table> 
</div>

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

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

    };
});

var-app=angular.module（“myApp”，[]）；
应用程序指令（“myDirective”，函数（）{
返回{
限制：'E'，
模板：“一月$100二月$80”，
};
});

您当前正在呈现

元素中的标记，这会弄乱表布局

相反，将指令更改为基于属性的指令，并将其放在

元素上，替换内容

模板

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

指示

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

返回{
限制：“A”，
模板：“一月$100二月$80”
};

---

请参阅工作。

@spb请参阅更新和工作小提琴。由于无法正确定义根元素，它将被替换。替换不是正确的解决方案。取而代之的是，只需更换车身内部的内容物，然后将其炸毁即可。哈哈。谢谢你的修复。你爸爸最好。是的，我一开始也把它炸掉了：）。没问题，乐意帮忙！