为什么表格在这些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：

当我在下面提出谢尔盖的建议时，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的新手，所以我无法评论谢尔盖的回答。但我很确定他的意思是：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

FAIL！对我而言！确实，当使用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>

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

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

如果你保留我们之前定义的指令，那意味着你的模板只能包含一行。我们定义了一个指令/行模型。

如果您确实需要模板上的多行，则必须将该指令应用于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>