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

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

  •  2
  • 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 年前
        1
  •  1
  •   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)
        }