angularjs - 使用 interpolate 和 transclude 生成表

Question

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

我尝试了许多不同的变体，但无法使其正常工作。我会包含代码，但我认为我还没有走在正确的轨道上？

我想要达到的目标:

数据:

mymodel.items = [{ number: 1, name: 'John'}, {number: 2, name: 'Bob'}]

html:

<grid items="mymodel.items">
    <column title="#">#{{item.number}}</column>
    <column title="Name"><b>Hello {{item.name}}</b></column>
</grid>

模板:

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

预期输出:

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

我似乎无法弄清楚如何将内容嵌入“网格”中，以便对其进行插值。

Answer 1

您可以手动创建模板:

这是一个笨蛋:http://plnkr.co/edit/C7HTRYZ4Hs1uOC9PXuza?p=preview

app.directive('grid', function() {
  return {
    restrict: 'E',
    replace:true,
    scope: {
      items: "="
    },
    template: function(tElm, tAttrs) {

      var td = "", th = "";

      angular.forEach(tElm.find('column'), function(column){
        th = th + "<th>" + column.title + "</th>";
        td = td + "<td>" + column.innerHTML + "</td>";
      });

      var template = '<table>' + 
                      '<thead>' + th + '</thead>' +
                      '<tbody>' +
                        '<tr ng-repeat="item in items">'+ td +'</tr>' +
                      '</tbody>' +
                    '</table>';
      return template;
    }
  };
});

您还可以使用更多指令构建它:

这是一个演示插件: http://plnkr.co/edit/a3xOSS6Un6XE9b1hQhvw?p=preview

用于保存嵌入列副本的一个指令(必须先运行):

app.directive('grid', function() {
  return {
    priority: 1200,
    restrict: 'E',
    compile: function(tElm, tAttrs) {
      tAttrs.columns = tElm.find('column');
      tElm.empty();
    },
    controller: function($attrs) {
      this.columns = $attrs.columns;
    }
  };
});

用于创建隔离范围并替换为模板的其他指令:

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>

还有两个不同的指令来克隆标题和内容。在这些指令中，您可以通过网格 Controller 引用嵌入的列:

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