行描く壊れ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))