代码之家 › 专栏 › 技术社区 › wobsoriano

如何使ng click在Angular DataTables列生成器中工作?

angular-datatables datatable angularjs javascript

wobsoriano · 技术社区 · 7 年前

控制器:

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

<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() 尽管一切都被完美地渲染,但仍能正常工作。我错过什么了吗?

1 回复 | 直到 7 年前

chirag satapara 7 年前

尝试以下解决方案。放置一个 createdRow vm.dtColumns ,您需要 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)
    }

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前