向 AngularJS 中的 DataTables 列 header 添加操作按钮

Question

我正在尝试向 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');
}

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

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 注入你的控制器，例如 . (Lousy google does not even bother to fix the errors in their docs, so 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。

向 AngularJS 中的 DataTables 列 header 添加操作按钮

Add an action button to DataTables column header in AngularJS

datatables

angularjs

angular-datatables