Angularjs 使用插值和转置生成表

我正在尝试使用AngularJS中的指令和tansclude组合一个可重用但自定义的表类型控件，但我遇到了一个难题，无法使用{{syntax}自定义进入表列的内容

我尝试了许多不同的变化，但都无法让它工作。我会包括代码，但我认为我还没有走上正确的轨道

我想要达到的目标：

数据：

html:

#{{item.number}
你好{{item.name}

模板：

<table>
    <thead>
        <th ng-repeat="column in columns">{{column.title}}</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in items">
             <td ng-repeat="column in columns">{{columnValue(item, column.content)}}</th>
        </tr>
    </tbody>
</table>

app.directive('grid', function() {
  return {
    priority: 1100,
    restrict: 'E',
    scope:{
      items: "="
    },
    templateUrl: 'grid.html'
  };
});

<table>
    <thead title-transclude></thead>
    <tbody>
        <tr ng-repeat="item in items" row-transclude></tr>
    </tbody>
</table>

{{column.title}}
{{columnValue（item，column.content）}

预期产出：

<table>
    <thead>
        <th>#</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr>
            <td>#1</td>
            <td>Hello John</td>
        </tr>
        <tr>
            <td>#2</td>
            <td>Hello Bob</td>
        </tr>
    </tbody>
</table>

#
名称
#1
你好，约翰
#2
你好，鲍勃

我似乎无法理解如何在“网格”中屏蔽内容，以便插入内容。

您可以手动创建模板： 这是一个扑克牌：

用于创建隔离作用域并替换为模板的其他指令：

app.directive('grid', function() {
  return {
    priority: 1100,
    restrict: 'E',
    scope:{
      items: "="
    },
    templateUrl: 'grid.html'
  };
});

<table>
    <thead title-transclude></thead>
    <tbody>
        <tr ng-repeat="item in items" row-transclude></tr>
    </tbody>
</table>

现在我想到了这个模板：

app.directive('grid', function() {
  return {
    priority: 1100,
    restrict: 'E',
    scope:{
      items: "="
    },
    templateUrl: 'grid.html'
  };
});

<table>
    <thead title-transclude></thead>
    <tbody>
        <tr ng-repeat="item in items" row-transclude></tr>
    </tbody>
</table>

---

你的第一个解决方案非常有效！我稍微修改了它，使用ngModel，而不是像我前面所问的那样传递项目，它非常完美。谢谢你的帮助！

app.directive('titleTransclude', function($compile) {
  return {
    require: '^grid',
    link: function(scope, elm, attr, grid) {
      var clones = [];
      angular.forEach(grid.columns, function(col) {
        var th = document.createElement('th');
        th.innerHTML = col.title;
        clones.push(th);
      });
      elm.append(clones);
      $compile(clones)(scope);
    }
  };
});

app.directive('rowTransclude', function($compile) {
  return {
    require: '^grid',
    link: function(scope, elm, attr, grid) {
      var clones = [];
      angular.forEach(grid.columns, function(col) {
        var td = document.createElement('td');
        td.innerHTML = col.innerHTML;
        clones.push(td);
      });
      elm.append(clones);
      $compile(clones)(scope);
    }
  };
});