为什么表格在这些 AngularJS 指令中不能正常工作？

Question

我有以下 AngularJS 模板文件：

<div ng-controller="PredictionCtrl as predictionCtrl">
  <table width="40%" border="1">
    <tbody>
      <tr>
        <td bgcolor="orange">A</td>
        <td bgcolor="yellow">B</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td bgcolor="pink">C</td>
        <td bgcolor="cyan">D</td>
      </tr>
    </tfoot>
  </table>
  <br>

  <table width="40%" border="1">
    <tbody>
      <rpt-my-directive-a p="1" q="2"></rpt-my-directive-a>
    </tbody>
    <tfoot>
      <rpt-my-directive-b r="3" s="4"></rpt-my-directive-a>
    </tfoot>
  </table>
</div>

在我的指令 myDirectiveA 的模板中，我有以下内容：

<tr>
  <td bgcolor="orange">E</td>
  <td bgcolor="yellow">F</td>
</tr>

在我的指令myDirectiveB 的模板中，我有以下内容：

<tr>
  <td bgcolor="pink">G</td>
  <td bgcolor="cyan">H</td>
</tr>

输出如下：

我期待两张外观一模一样的桌子。取而代之的是，我得到了一种颜色正确的颜色，而另一种则没有。为什么使用 AngularJS 指令构建的表格看起来与纯 HTML 表格不同？我该如何解决？我希望第二个表格看起来和第一个一样。

编辑#1：

当我在下面接受 Sergey 的建议时，myDirectiveA 的声明现在看起来像这样：

myApp.directive('myDirectiveA',function(){
    return {
      restrict:'A',
      replace: true,
      scope: {
        p: '=',
        q: '='
      },
      controller: 'MyDirectiveACtrl',
      controllerAs: 'MyDirectiveACtrl',
      bindToController: true,
      template: '<div ng-include="MyDirectiveACtrl.myDirectiveAHTML"></div>'
    };
  }
);

现在的输出如下所示：

Answer 1

对于表格，您需要正确嵌套元素。所以你不能在 tbody 标签内嵌套自定义标签，与 TR 相同......所以请在这种情况下对指令使用属性限制。

Answer 2

我是 Stackoverflow 的新手，所以我无法评论 Sergey 的回答。但我很确定他的意思是：https://jsfiddle.net/a41o54ec

在这一行：

template: '<div ng-include="MyDirectiveACtrl.myDirectiveAHTML"></div>'

div 必须是 tr。然后我希望MyDirectiveACtrl.myDirectiveAHTML 类似于<td>whatever</td>。我建议只需将模板更改为：

template: '<tr><td ng-include="MyDirectiveACtrl.myDirectiveAHTML"><td></tr>'

在模板中使用tr>td，MyDirectiveACtrl.myDirectiveAHTML 的内容几乎可以是任何内容。

编辑 #1

如果模板必须包含多行，我建议创建一个外部.html 并改用templateUrl。像这样……

新文件：myDirectiveA.template.html：

<tr>
  <td bgcolor="orange">E</td>
  <td bgcolor="yellow">F</td>
</tr>
<tr>
  <td bgcolor="orange">E</td>
  <td bgcolor="yellow">F</td>
</tr>

在指令定义中删除 template:... 并执行：

templateUrl: "path/to/myDirectiveA.template.html"

编辑#2

失败！对我而言！确实，当使用templateUrl 时，myDirectiveA.template.html 必须 包含一个 single 父元素。这意味着：

<tr>
  <td bgcolor="orange">E</td>
  <td bgcolor="yellow">F</td>
</tr>
<tr>
  <td bgcolor="orange">E</td>
  <td bgcolor="yellow">F</td>
</tr>

无法在模板上完成...由于我们正在使用表格，因此只有少数元素可以作为多个 <tr> 的父元素。成为<table>、<tbody> 和其他一些人。

由于表格限制了您可以使用的元素类型，因此您必须清楚地定义您使用这些指令执行的操作。您已经到了必须决定是每行使用指令还是每表使用指令的地步。

如果您保留我们之前定义的指令，这意味着您的模板只能包含一行。我们定义了一个directive-per-row模型。

如果您确实希望模板上有多个行，则必须将该指令应用于table 或tbody。 我会对table执行此操作，并让一个指令控制整个表格。

<table width="40%" border="1"
  rpt-my-directive-a
  p="1"
  q="2"
  >
</table>

另外，从你的指令定义中删除这一行。否则，<table> 元素将被模板的内容替换。

replace:true // REMOVE ME!

通过这样做...myDirectiveA.template.html 现在可以将tbody 作为父元素，警告将消失。

// myDirectiveA.template.html
<tbody>
  <tr>
    <td bgcolor="orange">E</td>
    <td bgcolor="yellow">F</td>
  </tr>
  <tr>
    <td bgcolor="orange">E</td>
    <td bgcolor="yellow">F</td>
  </tr>
</tbody>