用于表创建的 Angularjs 自定义指令

Question

我想创建一个可以在许多页面中使用的 angularjs 指令，该指令应该处理 html 表的创建，它可以根据页面的要求有不同的列。编写此指令的起点应该是什么，用户我们可以在不同的页面中有不同的列，但只有一个指令。

示例可以是主页

 <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>

关于页面

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Address</th> 
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Answer 1

var tableDirective = function(){
    return {
       restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        scope: {
            data: '='         
            },
            templateUrl: 'table-directive.html',
        }
};

angular.module('myModule').directive('tableDirective', tableDirective);

table-directive.html:

<table style="width:100%">
  <tr>
    <th ng-repeat="item in data.headList">{{ item.name }}</th>
  </tr>
  <tr ng-repeat="item in data.rowList">
    <td>{{ item.name }}</td>
    <td>{{ item.surname }}</td> 
    <td>{{ item.propertyName }}</td>
  </tr>
</table>

然后，您可以使用指令并传递数据：

<table-directive data="data"></table-directive>

这里data来自控制器：

...
$scope.data = {
   headList: [{ name: 'Company' }, { name: 'Address' }, { name: 'City' }],
   rowList: // here will be your data
}
...