jQuery DataTable Detail 不执行 onclick href

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

        });
}

函数 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。如果你有两种方式绑定到表单元素或使用更高级的指令，那没关系，但简单的点击是不值得的。