Question

我正在开发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不允许在指令中的模板中使用多个根使用替换：true
模板内容显示在标记之外（仅当模板包含单个标记时，它才会在表格

我只有不好的解决方案：

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

注意：我正在使用AngularJS v1.4.3。在最新的谷歌浏览器中进行调试。

Answer 1

好的，所以属性指令实际上是正确的方法，它只是花了一点时间才意识到转换的更改如何在较新版本的Angular中工作。

因此，使用较新版本的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>

Answer 2

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

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

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

AngularJS复杂表头

2 个答案: