AngularJS 1.6.9+DataTables：带ng-model的<input>渲染失败及解析错误

我来帮你搞定这个问题！你遇到的其实是Angular-Datatables的常见坑——手动拼接的HTML不会被Angular编译器处理，再加上字符串拼接的语法错误，才导致了无法渲染和解析报错。下面是具体的解决方案：

1. 先修复字符串拼接的语法错误 #

你当前的代码里，ng-model="vm.selected[' + data._id + ']"存在语法问题：如果data._id是字符串类型，生成的HTML会变成ng-model="vm.selected[abc123]"，这显然是无效的JavaScript语法（字符串没有被引号包裹）。我们需要给data._id加上单引号：

.renderWith(function (data, type, full, meta) {
  // 用转义单引号包裹_id，确保语法正确
  var html = '<input type="checkbox" ng-model="vm.selected[\'' + data._id + '\']"/>';
  console.log(html);
  return html;
}),

这样生成的HTML会是ng-model="vm.selected['abc123']"，完全符合语法要求。

2. 让Angular编译Datatables生成的DOM元素 #

Datatables是直接把HTML插入到DOM中的，Angular默认不会识别这些动态插入的指令（比如ng-model），所以需要用$compile服务手动编译这些元素。我们可以借助Angular-Datatables的createdRow回调来实现：

首先，确保你的控制器注入了$compile服务，然后在dtOptions中添加createdRow配置：

// 控制器注入$compile服务
app.controller('YourController', ['$scope', '$compile', 'DTOptionsBuilder', 'DTColumnBuilder', 
function($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
  var vm = this;
  // 必须初始化选中对象，不然Angular无法追踪数据变化
  vm.selected = {};

  vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('createdRow', function(row, data, dataIndex) {
      // 编译当前行的所有内容，让Angular识别ng-model指令并建立绑定
      $compile(angular.element(row).contents())($scope);
    });

  vm.dtColumns = [
    DTColumnBuilder.newColumn(null)
      .withTitle('')
      .notSortable()
      .withOption('width', '5%')
      .renderWith(function (data, type, full, meta) {
        return '<input type="checkbox" ng-model="vm.selected[\'' + data._id + '\']"/>';
      }),
    DTColumnBuilder.newColumn('number')
      .withTitle('Number')
      // 你的其他列配置...
  ];
}]);

为什么这样能解决问题？ #

• createdRow是Datatables的内置回调，每当一行被创建并插入DOM后就会触发，我们在这里用$compile编译行内的所有元素，让Angular解析ng-model指令并完成数据绑定。
• 修复后的字符串拼接确保了ng-model表达式的语法正确性，彻底避免了解析错误。

最后提醒：一定要在控制器里初始化vm.selected = {}，否则Angular无法追踪这个对象的属性变化，ng-model还是会失效哦！

内容的提问来源于stack exchange，提问作者konrad