如何调用角度数据表的销毁功能？

Question

我有一个控制器,我想在一个watch方法中调用控制器中的Jquery Datatables的destroy函数:

      $scope.$watch('model.SelectedWaiver', function() {
        if ($scope.model.SelectedWaiver.SurchargeID != null) {
            //destroy table here
            $scope.getIndecies($scope.model.SelectedWaiver);

        }
    });

我目前没有以任何方式设置表,因为页面上有两个表:

第一:

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
    //stuff
</table>

第二:

<table datatable="ng" id="secondTable" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
    //stuff
</table>

我想在用户选择第一个表中的不同行时销毁此表.

jquery等价物:

<script>
    $(document).ready(function() {
        var table = $('#secondTable').DataTable();


    });
    $('#selectedWaiver').on('change', function () {
        table.destroy();
    });
</script>

我如何在角度中执行这部分代码？

使用它来注入数据表

Answer 1

有了dtInstance你可以访问数据表API:

$scope.dtInstance = {};

dtInstance在表中添加声明

<table datatable dt-instance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns">

现在你可以使用破坏dataTable

$scope.dtInstance.DataTable.destroy();

angular dataTables有一个扩展的ngDestroy()清理自己的绑定:

$scope.dtInstance.DataTable.ngDestroy();

style标题中仍然有一些(还有一点垃圾),所以也要删除它们(这里是带有id的表#table):

$scope.destroy = function() {
    $scope.dtInstance.DataTable.ngDestroy();
    var i, ths = document.querySelectorAll('#table th');
       for (i=0;i<ths.length;i++) {
          ths[i].removeAttribute('style'); 
       }
    }
}

演示 - > http://plnkr.co/edit/fQ9YjsbNBNzyYuuvpk6T?p=preview

如果您有多个angular dataTables,请使用多个dtInstances不同的表id's.