如何在Angular DataTables列構建器中進行ng-click工作？

Question

所以我有這樣的代碼：

控制器：

vm.dtColumns = [ 
     DTColumnBuilder.newColumn('product_code').withTitle('Code'), 
     DTColumnBuilder.newColumn('product_name').withTitle('Name'), 
     DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable() 
     .renderWith(function(data, type, full, meta) { 
      return ` <button class="btn btn-info btn-raised" ng-click="openViewProductModal(${data.product_id})">View</button>`; 
     }) 
    ]; 

    $scope.openViewProductModal = function(id) { 
     console.log(id) 
    } 

HTML：

<div ng-controller="ProductCtrl as productControl" ng-init="loadProducts()"> 
    <table datatable="" dt-options="productControl.dtOptions" dt-columns="productControl.dtColumns" dt-instance="productControl.dtInstance" class="row-border hover"></table> 
</div> 

我甚至無法獲得console.log()工作，雖然一切都完美呈現。我在這裏錯過了什麼嗎？

Answer 1

請嘗試以下解決方案。在vm.dtColumns後面加上createdRow函數，您需要compile row爲ng-click事件。

vm.dtColumns = [ 
     DTColumnBuilder.newColumn('product_code').withTitle('Code'), 
     DTColumnBuilder.newColumn('product_name').withTitle('Name'), 
     DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable() 
     .renderWith(function(data, type, full, meta) { 
      return ` <button class="btn btn-info btn-raised" ng-click="openViewProductModal(${data.product_id})">View</button>`; 
     }) 
    ]; 

    function createdRow(row, data, dataIndex) { 
     $compile(angular.element(row).contents())($scope); 
    } 

    $scope.openViewProductModal = function(id) { 
     console.log(id) 
    }