Angularjs 角度指令包括<；tr>；创造；巫毒模式；

我有一个指令，它在表中创建一行，如下所示：

angular.module("myApp").directive('personRow', function() {
  return {
    template: "<tr><td>{{person.name}}</td><td>{{person.age}}</td></tr>"
  }
});

<div ng-app="myApp" ng-controller="myCtrl" class="ng-scope">
  <p>Looping wirth ng-repeat:</p>
  <!-- ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">John32</person-row><!-- end ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">Mary45</person-row><!-- end ngRepeat: person in people --><table>
    <tbody><tr><td>foo</td></tr>

    <tr></tr>
   </tbody></table>
</div>

所有的表元素似乎都在指令之后移动了，并且在指令之前的“foo”行也在指令之后移动了

页面上生成的html如下所示：

angular.module("myApp").directive('personRow', function() {
  return {
    template: "<tr><td>{{person.name}}</td><td>{{person.age}}</td></tr>"
  }
});

<div ng-app="myApp" ng-controller="myCtrl" class="ng-scope">
  <p>Looping wirth ng-repeat:</p>
  <!-- ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">John32</person-row><!-- end ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">Mary45</person-row><!-- end ngRepeat: person in people --><table>
    <tbody><tr><td>foo</td></tr>

    <tr></tr>
   </tbody></table>
</div>

重复循环：

2004年3月32日星期五
福

搞不清楚这里发生了什么

---

这是一个包含完整代码的plunker，它生成了以下内容：

经过进一步的研究，发现这个问题可以通过将指令作为tr元素的属性来解决，而不是将tr包含在指令中，即使用

 <tr person-row>..</tr> 

。。

而不是

 <person-row></person-row>