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