带有ngTransclude的AngularJS指令不显示{{bound}}内容

我试图创建一个Angular指令，创建一个我希望在我的应用程序中使用的表的标准化结构

我想在HTML中声明指令时指定tr的结构，以便根据传入的数据拥有不同的布局。然而，我似乎无法获得ng transclude的内容来实际渲染

普朗克：

我想要以下内容：

<custom-table table="data">
  <td>
    {{row.Username}}
  </td>
  <td>
    {{row.FirstName}}
  </td>
  <td>
    {{row.LastName}}
  </td>
</custom-table>

{{row.Username}
{{row.FirstName}
{{row.LastName}

要在模板内注入到

如何获取{row.Username}}etc标记以在angular指令中的ng transclude中解析

---

Edit1：我认为这是我刚刚发现的一个类似的问题，尽管大多数得票最高的答案似乎建议避免在指令中使用table、tr、td等：\

这并不能回答您的问题，但我认为这是一种更通用的方式，可以满足您的需求

首先将要显示的列列表传递给指令：

<custom-table table="data" columns="columns">
</custom-table>

app.directive('customTable', ['$compile', function($compile){
  return {
    restrict: 'E',
    templateUrl: 'tableTemplate.html',
    scope: {
      table: '=',
      columns: '='
    }
  };
}]);

app.directive('myTransclude', function() {
    return {
        compile: function(tElement, tAttrs, transclude) {
            return function(scope, iElement, iAttrs) {
                transclude(scope.$new(), function(clone) {
                    iElement.append(clone);
                });
            };
        }
    };
});

在你的指示中：

<custom-table table="data" columns="columns">
</custom-table>

app.directive('customTable', ['$compile', function($compile){
  return {
    restrict: 'E',
    templateUrl: 'tableTemplate.html',
    scope: {
      table: '=',
      columns: '='
    }
  };
}]);

app.directive('myTransclude', function() {
    return {
        compile: function(tElement, tAttrs, transclude) {
            return function(scope, iElement, iAttrs) {
                transclude(scope.$new(), function(clone) {
                    iElement.append(clone);
                });
            };
        }
    };
});

最后将模板更改为：

<div>
  <table>
    <thead>
      <tr>
        <th ng-repeat="col in columns">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in table">
        <td ng-repeat="col in columns">
          {{ row[col] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

{{col}}
{{row[col]}

---

下面是更新后的plunker:

我找到了一个解决问题的方法

我已经用一个工作示例更新了plunker。我必须创建一个指令：

<custom-table table="data" columns="columns">
</custom-table>

app.directive('customTable', ['$compile', function($compile){
  return {
    restrict: 'E',
    templateUrl: 'tableTemplate.html',
    scope: {
      table: '=',
      columns: '='
    }
  };
}]);

app.directive('myTransclude', function() {
    return {
        compile: function(tElement, tAttrs, transclude) {
            return function(scope, iElement, iAttrs) {
                transclude(scope.$new(), function(clone) {
                    iElement.append(clone);
                });
            };
        }
    };
});

我在评论中发现了这个问题

---

我还必须更新指令，使其使用基于CSS/div的表，而不是使用实际的HTML表。

为建议干杯；我已经有了一个通用的解决方案，它的功能与您的建议类似：）为了这个问题，我刚刚创建了一个简单的示例：）