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函数

2 个答案: