DTColumnBuilderのレンダリング幅にカスタムディレクティブを含める

Question

DTColumnBuilder.newColumn.renderWidthにカスタムディレクティブを含める方法はありますか？ここに私が達成したいと思うもののドラフトコードがあります。

DTColumnBuilder.newColumn('reportStructureName').withTitle('Structure Name') 
    .renderWith((data, type, full) => { 
      return "<my-directive></my-directive>"; 
    }), 

Answer 1

あなたはcreatedCellコールバックでのセルの内容を$compileすることができます。ここでは非常に簡単な例がありますが、テキストを赤で塗りつぶすだけの指示はありません。矢印機能:)

$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=preview