在 AngularJS 中向 DataTables 列标题添加一个操作按钮

Question

我正在尝试在角度数据表中的列标题中添加一个按钮，单击该按钮将运行一个函数。我试过做这样的事情。

DTColumnBuilder.newColumn('name').withTitle(function() {
return '<span>Name</span><button ng-click="runme()">Click me</button>'
})

在同一控制器中，runme()函数定义为：

$scope.runme = function() {
console.log('clicked');
}

但这不会触发，它只对列数据进行排序，无论我在哪里单击整个标题部分。

Answer 1

当你使用这种方法时，你需要$compile<thead>的内容(以及你希望 AngularJS 知道的 DataTables 注入的任何其他内容(。

调用$compile的一个好地方是initComplete回调：

$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('initComplete', function() {
$compile(angular.element('thead').contents())($scope)
})

演示 ->http://plnkr.co/edit/D72WPqkE3g2UgJTg

请记住将$compile注入到控制器中，例如请参阅在angularjs 中使用$compile。(糟糕的谷歌甚至懒得修复他们文档中的错误，所以 https://docs.angularjs.org/api/ng/service/$compile 不起作用(。

注意：您也可以使用静态<table>标记

<table>
<thead>
<tr>
<th><span>Name</span><button ng-click="runme()">Click me</button></th>
</tr>
</thead>
<tbody></tbody>
</table> 

然后 AngularJS 会$scope.runme连接到ng-click，并且只有当你需要在 DataTable 插入的动态内容中进行额外的绑定时，才需要$compile。