jQuery DataTable细节不会执行OnClick HREF

Question

我有一个jquery datatable，在打开详细信息时，示例显示一些信息以及一个链接（href），此链接在控制器的函数中呼叫，但请单击没有发生。

在创建我的数据表中，我在论坛中使用的搜索$ compile，以识别控制器的功能，问题是它甚至都不调用此函数。我已经尝试通过"警报（'test'）更改函数调用"，也没有执行

'<a ng-click="gerarDacte(' + d.documentoCodigo + ');" class="btn btn-icon btn-sm btn-twitter mr5"><i class="fa fa-twitter"></i> Gerar</a> ' +

观察以上线

function table(dados) {
    $scope.listaDadosGrid = dados;
    console.log(dados);
    function format(d) {
        // `d` is the original data object for the row
        var html =

            '<div class="demo-button3"> '+
            '<a ng-click="gerarDacte(' + d.documentoCodigo + ');" class="btn btn-icon btn-sm btn-twitter mr5"><i class="fa fa-twitter"></i> Gerar</a> ' +
            '<br>' +
            '</div> ';

        return html;
    };
    var selecionados = [];
    $(document).ready(function (data) {
        var table = $('#tableDocumentos').DataTable({
            aaData: dados,
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json",
                decimal: ",",
                thousands: "."
            },
            deferRender: true,
            bAutoWidth: false,
            bProcessing: true,
            bDeferRender: true,
            createdRow: function (row, data, dataIndex) {
                $compile(angular.element(row).contents())($scope);
            },
            columnDefs: [{
                targets: 0,
                searchable: false,
                orderable: false,
                checkboxes: {
                    selectRow: true
                },
            }],
            select: {
                style: 'multi'
            },

            sAjaxDataProp: "",
            bDestroy: true,
            order: [[2, "asc"]],
       });
        $('#tableDocumentos tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
}

功能gerardacte

$scope.gerarDacte = function (idDocumentoLogistico) {
    //go to...
}

我在jsfiddle中创建了一个示例

谢谢

Answer 1

如上所述，您应该使用 $compile将子行绑定到 $scope：

：

} else {
  // Open this row
  row.child(format(row.data()), 'no-padding').show();
  tr.addClass('shown');
  $compile(row.child()[0])($scope); //<-- HERE
  $('div.slider', row.child()).slideDown();
}

您还需要实际将您的函数绑定到$scope：

$scope.gerarDacte = function(id){
   alert(id);
}

现在它有效，更新了小提琴 -> http://jsfiddle.net/adukg/16222/

但是，为什么您想将孩子行绑定到我无法理解的$scope，似乎有点过分。您可以将JavaScript/jQuery事件侦听器绑定到按钮（或其他），并可以从该侦听器内部访问$scope，您无需一路穿过Angular。如果您具有两种方式绑定以形成元素或使用更多高级指令，则可以，但是单击不值得。