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

【问题标题】：Add an action button to DataTables column header in AngularJS在 AngularJS 中向 DataTables 列标题添加一个操作按钮
【发布时间】：2020-05-24 04:47:50
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： angularjs datatables angular-datatables

【解决方案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 注入你的控制器，例如Working with $compile in angularjs。（糟糕的谷歌甚至懒得修复他们文档中的错误，所以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，只有当你需要在DataTables插入的动态内容中额外绑定时，才需要$compile。

【讨论】：