如何使 ng-click 在 Angular DataTables 列构建器中工作？

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)
    }