Angularjsテーブルの作成のためのカスタムディレクティブ

Question

多くのページで使用できるangularjsディレクティブを作成したい、このディレクティブはhtmlテーブルの作成を処理する必要があります。ページの要件によって異なるカラムを持つことができます。このディレクティブを書くための出発点は何でしょうか？ユーザーが異なるページに異なるカラムを持つことができますが、ディレクティブを1つしか持たない場合は、

例のホーム・ページ

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

その後、あなたはディレクティブを使用することができますし、合格データ：

0123ここで

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

は、コントローラから来る：それはあなたの役に立てば幸い

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