Reihe zeichnen korrupt renderWith Funktion

Question

ich Rendering bin die Spalte mit unten Funktion machen:

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>'; 
} 

Wenn der Benutzer auf ein Optionsfeld klickt, unter vm.toggleValidation Funktion ausgelöst wird:

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); 
} 

Rendered Radio-Buttons gestoppt funktioniert, sobald das Redraw abgeschlossen ist. Ich kann Radio-Buttons sehen, aber toggleValidation wird nicht beim Klicken auf einen Radio-Button aufgerufen. Optionsfeld funktioniert nur einmal. Wenn ich die Funktion draw entferne, funktioniert es perfekt, so dass beim Neuzeichnen der Zeile etwas nicht in Ordnung ist.

Answer 1

Ich kann Ihr Szenario nicht replizieren, aber: Der Grund ist, dass Sie tatsächlich das DOM um draw() ändern und dadurch die eckigen Anweisungen zurückgesetzt werden. Sie müssen die Direktiven neu initialisieren, indem Sie $compile verwenden. Ich denke, die folgenden funktionieren würde:

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

Wenn es nicht funktioniert ,, fügen Sie ein

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

auch. Aber denke nicht, dass es notwendig ist.

Answer 2

Sie hängen eine Vorlage an, die sich auf den aktuellen Bereich bezieht (siehe Aufruf an vm.toggleValidation), dies erfordert einen expliziten Aufruf der $ compile-Methode, andernfalls ist das Element nicht an den Bereich gebunden und wird als gerendert ein statischer Inhalt.

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