2017-04-12 4 views
1

DTColumnBuilder.newColumn.renderWidth에 사용자 지정 지시문을 포함 할 수있는 방법이 있습니까? 다음은 달성하고자하는 초안 코드입니다.DTColumnBuilder renderwidth에 사용자 지정 지시문 포함

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

답변

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

+0

감사합니다, 나는 밖으로이 하나를 시도 할 것이다 당신을 업데이트합니다. :) – jengfad