为什么表在这些AngularJS指令中无法正常工作? [英] Why are tables not working right in these AngularJS directives?

问题描述

我有以下AngularJS模板文件:

I have the following AngularJS template file:

<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 的模板中，我具有以下内容:

In the template for my directive myDirectiveA, I have the following:

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

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

In the template for my directive myDirectiveB, I have the following:

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

输出看起来像这样:

我期待有两个外观相同的桌子.取而代之的是，我得到了一种带有适当颜色的颜色，而另一种则没有.为什么使用AngularJS指令构造的表看上去与纯HTML的表不同?我该如何解决?我希望第二张桌子看起来像第一张桌子.

I was expecting two identical-looking tables. Instead I got one with the proper colors and one without. Why did the table that was constructed using AngularJS directives come out looking different than the plain-HTML one?? How do I fix this? I want the second table to look just like the first.

编辑#1:

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

When I took Sergey's advice below, the declaration for myDirectiveA now looks like this:

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>'
    };
  }
);

现在输出看起来像这样:

and the output now looks like this:

推荐答案

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

I'm new to Stackoverflow, so I couldn't comment On Sergey's answer. But I'm pretty sure he meant this: https://jsfiddle.net/a41o54ec

在这一行:

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

该 div 必须是 tr .然后，我希望 MyDirectiveACtrl.myDirectiveAHTML 是< td> whatever</td> 之类的东西.我建议仅将模板更改为此:

That div needs to be a tr. And then I hope MyDirectiveACtrl.myDirectiveAHTML is something like <td>whatever</td>. I would recommend simply changing the template to this:

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

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

With tr>td in the template, the contents of MyDirectiveACtrl.myDirectiveAHTML can be almost anything.

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

If the template must contain several rows i would recommend creating an external .html and use templateUrl instead. Like this...

<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 必须包含一个单个父元素.这意味着:

EDIT #2

FAIL! on my part! It is true that when using templateUrl, myDirectiveA.template.html MUST contain a single parent element. That means that this:

<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> 和其他一些

can't be done on the template... Since we are playing with tables, there's only a few elements that could be a parent for several <tr>. Being <table>, <tbody>, and a few others.

由于表限制了您可以使用的元素类型，因此必须明确定义使用这些指令的操作.您到达了必须决定是在每行使用指令还是在每表使用指令的地方.

Since tables limit the element types you can use, you have to clearly define what you are doing with these directives. You reached a point where you have to decide if you are using a directive per row or a directive per table.

如果您按照我们之前定义的方式保留该指令，则意味着您的模板只能包含一行.我们定义了每行指令模型.

If you keep the directive as we defined it before, that means your template can only contain one row. We defined a directive-per-row model.

如果您确实希望模板上有多行，则必须将指令应用于 table 或 tbody .我将其保存到表中，并让一个指令控制整个表.

If you do want multiple rows on your template you must then apply the directive to table or tbody. I would do it to table and let one directive control the whole table.

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

此外，从指令定义中删除此行.否则，< table> 元素将被模板的内容替换.

Also, remove this line from your directive definition. Otherwise, the <table> element will get replaced by the contents of the template.

replace:true // REMOVE ME!

通过执行此操作... myDirectiveA.template.html 现在可以将 tbody 作为父元素，并且警告将消失.

By doing this... myDirectiveA.template.html can now have tbody as a parent element and the warning will go away.

// 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>

这篇关于为什么表在这些AngularJS指令中无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！