angular.js的表格指令

html

div.col-sm-12
	table.table.table-bordered.table-condensed.table-hover.table-striped.dataTable.no-footer
		thead
			tr(role="row")
				th(ng-repeat="item in config track by $index" ng-bind="item.title")
				th(ng-if="!transHide") 操作
		tbody
			tr(ng-repeat="(key,ls) in list track by $index")
				td.sorting_1(ng-repeat="item in config track by $index" ng-bind="{{item.data}}")
				td(ng-transclude='' ng-if="!transHide")
			tr(ng-if="list.length==0")
				td(colspan="{{transHide?config.length:(config.length+1)}}") 没有任何数据

　　

js

angular.module('app').directive('ltTable', ['$rootScope',function($rootScope){
	// Runs during compile
	return {
		// name: '',
		// priority: 1,
		// terminal: true,
		scope: {
			list:'=data',
			config:'=',
			dictionaries:'='
		}, // {} = isolate, true = child, false/undefined = no change
		// controller: function($scope, $element, $attrs, $transclude) {},
		// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
		// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
		// template: '',
		templateUrl: 'app/dist/directive/table/table.html',
		// replace: true,
		transclude: true,
		// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
		link: function($scope, iElm, iAttrs, controller,transclude) {
			$scope.globalConfig=$rootScope.globalConfig;
			// console.log(transclude())
			var tansNode=transclude()[0];
			if(!tansNode||(!tansNode.tagName&&!tansNode.textContent)){
				$scope.transHide=true;
			}
		}
	};
}]).directive('ltTableOut', [function(){
	// Runs during compile
	return {
		// name: '',
		// priority: 1,
		// terminal: true,
		scope:{
			name:"@"
		}, // {} = isolate, true = child, false/undefined = no change
		// controller: function($scope, $element, $attrs, $transclude) {},
		// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
		// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
		// template: '',
		templateUrl: 'app/dist/directive/table/tableouter.html',
		// replace: true,
		transclude: true,
		// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
		link: function($scope, iElm, iAttrs, controller) {
		}
	};
}]);;

　　

子html

div.row
	div.col-lg-12.ui-sortable
		div.box.ui-sortable-handle
			header
				div.icons
					i.glyphicon.glyphicon-th
				h5(ng-bind="name")
			div.body
				div.dataTables_wrapper.form-inline.dt-bootstrap.no-footer(ng-transclude="")

　

页面样式