Javascript AngularJS复杂表头

我正在开发时间表应用程序。我已经准备好了布局（html/css）。目前我正在研究布局行为。我当前的目标是提取指令中的时间表表头。角度模板html应类似于以下内容：

<colgroup class="col_day">
    <col ng-repeat="day in header.days" ng-class="someConditions">
</colgroup>
<thead>
    <tr>
        <th ng-repeat="day in header.days" ng-class="someConditions">
            {{someLayout}}
        </th>
    </tr>
</thead>

{{someLayout}}

我想通过如下指令使用此模板：

<table>
    <timesheet-header></timesheet-header>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

问题：

• Angular不允许在指令中的模板中使用多个根 用替换：true
• 模板内容显示在标记外部（仅当模板包含单个标记时，才会在表内部呈现）

我只有糟糕的解决方案：

• 为colgroup和thead创建两个不同的指令（这将解决 多个根，但html仍将显示在表标记之外）
• 保持模板绑定结果不可见，并在生成的 html到表（通过jquery）
• 使用该指令作为表标记的属性…我尝试了，但 删除所有其他表内容（我尝试了转写）

---

注意：我正在使用AngularJS v1.4.3。在最新的Google Chrome中进行调试。

好的，因此attribute指令实际上是正确的，只是花了一点时间才意识到在新版本的Angular中如何对transclude进行更改

因此，对于Angular的较新版本，ng transclude实际上删除了指令中的所有内容。但事实证明，当您在指令上使用transclude选项时，Angular实际上在link函数中向您公开了一个函数，该函数允许您手动处理转置的内容。一旦有了它，您可以告诉它只需附加内容，而不是像默认情况下那样替换内容

在这里可以找到一些关于这个主题的好读物：

模板：

<table>
  <colgroup class="col_day">
      <col ng-repeat="day in header.days" ng-class="someConditions">
  </colgroup>
  <thead>
      <tr>
          <th ng-repeat="day in header.days" ng-class="someConditions">
              {{someLayout}}
          </th>
      </tr>
  </thead>
</table>

实际HTML代码：

<table timesheet-header>
    <tbody>
        <tr>
            <td>Hello</td>
            <td>world!</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

你好
世界！

“为colgroup和thead创建两个不同的指令（这解决了多个根，但html仍将出现在表标记之外）”-您可以在中找到有关此行为的更多详细信息，尤其是在中

您可以使用表as属性的transclude和custom指令解决此问题

4.
5.
.directive（'myTable'，[function（）{
返回{
限制：“A”，
是的，
模板：“”+
“{{n}}”+
'' +
'' +
“{{n}}”+
'' +
'' +
'' +
''
};
}]) 

您确定当您创建两个不同的指令时，这些指令的HTML内容会出现在

表

标记之外吗？是的，我尝试了多次。我甚至尝试将模板简化为纯单标记HTML。只有标记出现在内部。所有其他标记（单标记或单标记）都出现在外部（之前）。我觉得带transclude的属性指令是正确的答案。您能给我一些关于您尝试该操作时发生的情况的更多信息吗？在出现大型角度控制器和广泛的html之前。我开始将部分代码拉到分离指令，并面临所描述的问题。当我尝试使用元素时-模板html中的指令已从中推出。请随时请求所需的任何详细信息。谢谢您的回答！现在对我来说效果很好。我将在trunscluded内容中添加一些角度指令，希望它能工作=）太棒了！我很高兴能帮上忙。

<table timesheet-header>
    <tbody>
        <tr>
            <td>Hello</td>
            <td>world!</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

<table my-table>
  <tbody>
    <tr>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

.directive('myTable', [function() {
  return {
    restrict: 'A',
    transclude: true,
     template: '<table>' +
              '<colgroup class="col_day"><col ng-repeat="n in [1, 2] track by $index">{{n}}</col></colgroup>' +
               '<thead>' +
                  '<tr>' +
                    '<th ng-repeat="n in [1, 2] track by $index"> {{n}}</th>' +
                  '</tr>' +
                '</thead>' +
                '<div ng-transclude></div>' +
            '</table>'
      };
  }])