生成带插值和转换的表

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

您可以手动创建模板:

这是一个plunker: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

保存transcluded列副本的一个指令(必须先运行):

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>

还有两个不同的指令来克隆标题和内容.在这些指令中,您可以通过网格控制器引用已转换的列:

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