我想创建一个可以在很多页面中使用的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>
答案 0 :(得分:2)
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
}
...