AngularJS 复杂表头答案

【问题标题】：AngularJS complex table headerAngularJS 复杂表头
【发布时间】：2015-11-12 20:26:10
【问题描述】：

我正在开发 Timesheet 应用程序。我已经准备好布局（html/css）。目前我正在研究布局行为。我目前的目标是在指令中提取时间表表头。 Angular 模板 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>

我想通过这样的指令使用这个模板：

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

问题：

Angular 不允许在指令的模板中使用多个根用 替换：真
模板内容出现在标签之外（仅当模板包含单个标签时，它才会呈现在表格内

我只有不好的解决方案：

为 colgroup 和 thead 创建两个不同的指令（这解决了多个根，但 html 仍会出现在 table 标记之外）
保持模板绑定结果不可见并预先生成生成的副本 html 到表格（通过 jquery）
使用指令作为表标签的属性...我试过了，但是这个删除所有其他表格内容（我尝试过转置）...

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

【问题讨论】：

你确定当你创建两个不同的指令时，这些指令的HTML内容出现在table标签之外吗？
是的，我尝试了多次。我什至尝试将我的模板简化为纯单标签 html。只有标签出现在中。所有其他标签（单个或单个）出现在

之外（之前）。

我觉得带有 transclude 的属性指令是正确的答案。你能告诉我更多关于你尝试这样做时发生了什么的信息吗？

在有一个大角度控制器和广泛的 html 之前。我开始将部分代码拉到单独的指令中，并面临所描述的问题。当我尝试在

中使用 Element-Directive 时，模板 html 会从
中推出。随时索取您需要的任何详细信息。

【解决方案1】：

“为 colgroup 和 thead 创建两个不同的指令（这解决了多个根，但 html 仍会出现在 table 标记之外）” - 您可以在 https://github.com/angular/angular.js/issues/1459 中找到有关此行为的更多详细信息。特别是https://github.com/angular/angular.js/issues/1459#issuecomment-67235182

您可以使用表的 transclude 和自定义指令作为 attribute

来解决此问题

http://plnkr.co/edit/8JptrwUcA0pPl9xB9yZQ?p=preview

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

【讨论】：

【解决方案2】：

好的，所以属性指令实际上是正确的方法，只需要一点时间就可以了解在新版本的 Angular 中对 transclude 的更改是如何工作的。

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

可以在此处找到有关该主题的一些好读物：http://ng.malsup.com/#!/transclude-function

模板：

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

指令：

app.directive('timesheetHeader', function() {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    templateUrl: 'timesheet-header.template.html',
    link: function(scope, el, attrs, ctrl, transcludeFn) {
      var transcludedContent = transcludeFn();
      el.append( transcludedContent );
    }
  };
});

实际 HTML 代码：

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

【讨论】：

感谢您的精彩回答！它现在对我来说很好。我将在 trnscluded 内容中添加一些角度指令，希望它能起作用 =)
太棒了！我很高兴能帮上忙。