AngularJS-自定義Directive-Table

1. directive ba-tab

app.directive("bsTab", function ($interval) {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: {
            delta: "="
        },
        template: "\
<div class='bs-table'>\
    <div class='bs-table-head'>\
        <table class='table table-striped'></table>\
    </div>\
    <div class='bs-table-body'>\
        <table class='table table-striped' ng-transclude></table>\
    </div>\
<div>",
        link: function ($scope, element, attrs) {
            // thead所在表格
            var tab1 = element.find(".bs-table-head>table");
            // tbody所在表格
            var tab2 = element.find(".bs-table-body>table");
            // 將thead移動到thead所在表格
            tab1.append(tab2.find("thead"));

            $scope.clmWidths = []; 
            var tdAs = tab1.find("th");

            function resize() {
                var widths = [];
                var tdBs = tab2.find("tbody tr:eq(0) td")
                tdBs.each((i) => {
                    widths.push(tdBs.eq(i).width());
                })
                if ($scope.clmWidths.join(",") == widths.join(",")) {} else {
                    $scope.clmWidths = widths;
                    var i = 0;
                    widths.forEach(w => {
                        $(tdAs.eq(i++).find("div.ph")).width(w);
                    })
                    tab1.parent().width(tab2.parent().width());
                    tab1.width(tab2.width());
                }
            }
            tdAs.each((i, e) => {
                $(e).append("<div class='ph'></div>")
            })
            tab2.parent().height($(window).height() - $scope.delta); 
            $interval(resize, 200);
        }
    }
});

2. html

<table width="100%" class="table table-striped table-hover" bs-tab>
	<thead>
		<tr class="table-header">
			<th>#</th>
			<th>環境</th>
			<th>系統簡稱</th>
			<th>系統名稱</th>
			<th>IP</th>
			<th>用戶名</th>
			<th>密碼</th>
			<th>日誌目錄</th>
			<th>操做</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="svr in filteredServers">
			<td>{{$index + 1}}</td>
			<td>
				<span ng-hide="svr.editing">{{envMap[svr.env]}}</span>
				<select ng-show="svr.editing" class="form-control" ng-options="v.value as v.name for v in envs"
					ng-model="svr.env"></select>
			</td>
			<td>
				<span ng-hide="svr.editing">{{svr.system}}</span>
				<input ng-show="svr.editing" type="text" class="form-control" ng-model="svr.system">
			</td>
			<td>
				<span ng-hide="svr.editing">{{svr.name}}</span>
				<input ng-show="svr.editing" type="text" class="form-control" ng-model="svr.name">
			</td>
			<td>
				<span ng-hide="svr.editing">{{svr.ip}}</span>
				<input ng-show="svr.editing" type="text" class="form-control" ng-model="svr.ip">
			</td>
			<td>
				<span ng-hide="svr.editing">{{svr.uid}}</span>
				<input ng-show="svr.editing" type="text" class="form-control" ng-model="svr.uid">
			</td>
			<td>
				<span ng-hide="svr.editing">{{svr.pwd}}</span>
				<input ng-show="svr.editing" type="text" class="form-control" ng-model="svr.pwd">
			</td>
			<td>
				<span ng-hide="svr.editing">{{svr.dir}}</span>
				<input ng-show="svr.editing" type="text" class="form-control" ng-model="svr.dir">
			</td>
			<td>
				<div class="btn-group" role="group" aria-label="...">
					<button class="btn btn-primary btn-sm" ng-click="editOrSaveServer(svr)"><span
							class="fa fa-fw" ng-class="svr.editing?'fa-save':'fa-edit'"></span></button>
					<button class="btn btn-danger  btn-sm" ng-click="delServer($index)"><span
							class="fa fa-fw fa-times"></span></button>
				</div>
			</td>
		</tr>
	</tbody>
</table>