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="")
页面样式
