Question

AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

Answer 1

在ng-repeat中，含有动态的html，而这些html中含有自定义指令。
因为希望实现一个能够复用的table，所以定义了一个指令myStandTable，指令代码大概如下：

var myCommon = angular.module("myCommon",[]);
myCommon.directive("myStandTable", function () {
return {
restrict: "A",
templateUrl: "app/template/tableTem.html",
transclude: false,
replace: true,
controller: function ($scope,$compile, commonService) {
// do something...
},
link: function (scope, element, attris) {
}
}
});

tableTem.html文件代码如下：

<div>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th ng-if="tableData.multiSelect">
<input type="checkbox" id="check-all" ng-model="itemsChecked">
<label for="check-all" class="fa" ng-class="{'fa-square-o': !itemsChecked, 'fa-check-square-o': itemsChecked }" aria-hidden="true">
</label>
</th>
<th ng-repeat="item in tableData.thead">{{item}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in tableData.items" ng-click="selectItem(item)" ng-init="item.selected = false" ng-class="{'selected': item.selected}">
<td ng-if="tableData.multiSelect">
<input type="checkbox" id="check_{{$index}}" ng-model="item.selected">
<label for="check_{{$index}}" class="fa" ng-class="{'fa-square-o': !item.selected, 'fa-check-square-o': item.selected }" aria-hidden="true">
</label>
</td>
<td ng-repeat="name in tableData.theadName">
{{item[name]}}

</td>
</tr>
</tbody>
</table>
</div>