Question

我试图创建一个Angular指令，该指令创建一个表格的标准化结构，我想在我的应用程序中使用它。

我想在HTML中声明指令时指定tr的结构，这样我就可以根据传入的数据使用不同的布局。但是，我似乎无法获得ng的内容-transclude实际渲染。

我喜欢以下内容：

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

注入模板内。

如何在angular指令的ng-transclude中解析{{row.Username}} etc标签？

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

Answer 1

这不能回答你的问题，但我认为这是一种更通用的方式来做你想做的事。

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

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

在您的控制器中：

app.controller('MainCtrl', function($scope) {
  $scope.data = [
    {Username: "Test1", FirstName: "Bill", LastName: "Jones"}, 
    {Username: "Test2", FirstName: "Sophie", LastName: "O'Grady"}, 
    {Username: "Test3", FirstName: "Tim", LastName: "Cross"}
    ];

  $scope.columns = ["Username", "FirstName", "LastName"]
});

在你的指令中：

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

最后将模板更改为：

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

这是更新的plunker：http://plnkr.co/edit/dYwZWD2jB2GsmnvmuSbT

Answer 2

我找到了解决问题的解决办法。

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

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

我在评论中发现了问题here。

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

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

2 个答案: