행 그릴 손상 renderWith 기능

Question

나는 아래의 기능을 렌더링과 열을 렌더링하고

:

DTColumnBuilder.newColumn(null).withTitle('Validation').renderWith(validationRenderer) 

function validationRenderer(data, type, full, meta) { 
    return '<div class="btn-group">' + 
     '<label class="btn btn-default btn-sm">' + 
     '<input ng-click="vm.toggleValidation($event, ' + data.id + ', '+meta.row+', '+meta.col+')" name="validation'+data.id+'" type="radio" autocomplete="off" value="YES"> Yes' + 
     '</label>' + 
     '<label class="btn btn-default btn-sm">' + 
     '<input ng-click="vm.toggleValidation($event, ' + data.id + ', '+meta.row+', '+meta.col+')" name="validation'+data.id+'" type="radio" autocomplete="off" value="NO"> No' + 
     '</label>' + 
     '</div>'; 
} 

vm.toggleValidation 기능이 트리거 아래에 사용자가 라디오 버튼을 클릭 :

vm.toggleValidation = toggleValidation; 
function toggleValidation(event, id, rowNum, colNum) { 
    event.stopPropagation(); 

    // call to a server and then redraw ... 

    $log.info('Updating row and re-drawing it..'); 
    var table = vm.dtInstance.DataTable; 
    var row = table.row(rowNum); 
    var rowData = row.data(); 
    rowData.validation = event.target.value; 
    table.row(rowNum).data(rowData).draw(false); 
} 

렌더링 라디오 버튼이 중지 다시 그리기가 완료되면 바로 작업합니다. 라디오 버튼을 볼 수 있지만 라디오 버튼을 클릭하면 toggleValidation이 호출되지 않습니다. 라디오 버튼은 한 번만 작동합니다. draw 함수를 제거하면 함수가 완벽하게 작동하므로 행을 다시 그리는 데 문제가 있습니다.

Answer 1

시나리오를 복제 할 수는 없지만 실제 DOM을 draw()으로 수정하고 각도 지시문이 재설정된다는 것입니다. $compile을 사용하여 지시문을 다시 초기화해야합니다. 나는 다음과 같은 작업 것 같아요

table.row(rowNum).data(rowData).draw(false); 
$compile(table.row(rowNum).nodes())($scope); 

가 작동하지 않는 경우가 ,,뿐만 아니라

$timeout(function() { 
    $scope.$digest() 
}) 

를 추가합니다. 그러나 그것이 필요하다고 생각하지 마십시오.

Answer 2

현재 범위를 참조하는 템플릿을 추가하고 있습니다 (vm.toggleValidation 호출 참조). $ compile 메서드를 명시 적으로 호출해야합니다. 그렇지 않으면 요소가 범위에 바인딩되지 않고 다음과 같이 렌더링됩니다. 정적 인 내용

DTColumnBuilder.newColumn(null).withTitle('Validation') 
.renderWith($compile(validationRenderer)($scope))