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

表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 
} 
...