行绘制损坏的 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

我无法复制您的场景，但是：原因是您实际上通过 draw() 修改了 DOM 并且 angular 指令被重置。您需要使用 $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))

行绘制损坏的 renderWith 函数

Row draw corrupt renderWith function

jquery

datatables

angularjs

datatables-1.10

angular-datatables