Question

我有一个jQuery DataTable，在打开详细信息example时，会显示一些信息以及链接（href），此链接会调用控制器的功能，但不会发生单击。

在创建我的数据表时，我在论坛中使用搜索，$ compile，以识别控制器的功能，问题是它甚至不调用此函数。我已经尝试通过“alert（'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');
            }

        });
}

function gerarDacte

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

我在jsfiddle

中创建了一个示例

谢谢

Answer 1

如上面的小评论中所述，您应该使用android:autoVerify="true"将子行绑定到$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

现在它起作用了，更新了小提琴 - ＆gt;的 http://jsfiddle.net/ADukg/16222/

但是为什么要将子行绑定到$scope.gerarDacte = function(id){ alert(id); }我无法理解，似乎有点矫枉过正。您可以将javascript / jQuery事件侦听器绑定到该按钮（或其他任何内容）并从该侦听器中访问$scope，您无需一直走过角度。如果您有两种方式绑定到表单元素或使用更高级的指令，那就没关系，但是单击一下就不值得了。

jQuery DataTable Detail不执行onclick href

1 个答案: