在 DTColumnBuilder 渲染宽度上包含自定义指令 [英] Include custom directives on DTColumnBuilder renderwidth
本文介绍了在 DTColumnBuilder 渲染宽度上包含自定义指令的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
DTColumnBuilder.newColumn.renderWidth 有没有办法包含自定义指令?这是我想要实现的代码草案.
Is there a way for DTColumnBuilder.newColumn.renderWidth to include custom directives? Here is a draft code of what I want to achieve.
DTColumnBuilder.newColumn('reportStructureName').withTitle('Structure Name')
.renderWith((data, type, full) => {
return "<my-directive></my-directive>";
}),
推荐答案
您可以在 createdCell
回调中$compile
单元格内容.这是一个非常简单的示例,其中的指令仅将文本着色为红色.抱歉没有使用箭头函数 :)
You can $compile
the cell content in the createdCell
callback. Here is a very simple example, with a directive that does nothing but coloring the text red. Sorry for not using arrow functions :)
$scope.data = [
{ reportStructureName : "structurename1" },
{ reportStructureName : "structurename2" },
{ reportStructureName : "structurename3" },
{ reportStructureName : "structurename4" }
]
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('data', $scope.data)
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('reportStructureName')
.withTitle('Structure Name')
.renderWith(function(data, type, full) {
return "<my-directive>"+data+"</my-directive>";
})
.withOption('createdCell', function(td, cellData, rowData, row, col) {
$compile( td )( $scope ); //<--- here
})
]
指令:
.directive('myDirective', function() {
return {
restrict: 'AE',
link: function (scope, element, attr, ctrl) {
angular.element(element).css('color', 'red')
}
}
})
演示 -> http://plnkr.co/edit/aok6SyWZlLaQv8UsEVIf?p=预览
demo -> http://plnkr.co/edit/aok6SyWZlLaQv8UsEVIf?p=preview
这篇关于在 DTColumnBuilder 渲染宽度上包含自定义指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文