ng-click 不工作 AngularJS 和 dataTables

Question

我为 AngularJS 编写了一个 dataTables 指令。它工作正常，除了我尝试向行添加一个按钮，通过 ng-click 删除一行。

在我看来，问题的出现是因为表格行现在不在范围内。

谁能帮我解决这个问题。

jsFiddle 示例：http://jsfiddle.net/A5Zvh/7/

我的指令看起来像这样。

angular.module('DataTables', [])
.directive('datatable', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        require: 'ngModel',
        template: '<table></table>',
        link: function(scope, element, attrs, model) {
            var dataTable = null,
                options;

            var buttons = jQuery.parseJSON(attrs['buttons']) || null;

            options  = {
                    "bJQueryUI": false,
                    "sDom": "<'row-fluid'<'span4'l><'span8 filter' <'pull-right'T> <'pull-right'f>>r>t<'row-fluid'<'span6'i><'span6'p>>",
                    "sPaginationType": "bootstrap",
                    "oTableTools": {
                    }
                };

            if(_.has(attrs, 'datatableOptions')) {
                jQuery.extend(true, options, scope.$eval(attrs['datatableOptions']));
            }

            scope.$watch(attrs.ngModel, function(data) {
                if(data && _.size(data.aaData) > 0 && _.size(data.aoColumns) > 0) {

                    _.extend(options, scope.$eval(attrs.ngModel))
                    dataTable = $(element).dataTable(options);
                    dataTable.fnClearTable();
                    dataTable.fnAddData(data.aaData);
                }
            });
        }
    }
})

Answer 1

我正在使用Angular-datatbles，我正在尝试动态添加、编辑和删除指向数据表行的链接并在 ng-click 上显示模式；

这是我的情况的解决方案；

$scope.dtOptions.withOption('fnRowCallback',
     function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $compile(nRow)($scope);
     });

所有数据表绑定代码；

$scope.reloadData = function () {
    $scope.dtOptions.reloadData();
};

$scope.dtColumnDefs = [

    DTColumnDefBuilder.newColumnDef(2).renderWith(function (data, type, row) {
        var html = '<a href="" class="txt-color-blue pull-left" ng-click="editModal()"><i class="fa fa-pencil hidden-xs"></i> Edit</a>' +
                   '<a href="" class="txt-color-red padding-top-15" ng-click="removeModal()"><i class="fa fa-times hidden-xs"></i> Remove</a>';
        return html;
    })
];

$scope.dtColumns = [
    DTColumnBuilder.newColumn('name').withTitle('Name'),
    DTColumnBuilder.newColumn('type').withTitle('Type'),
    DTColumnBuilder.newColumn('id').withTitle(''),
];

$scope.dtOptions.withOption('fnRowCallback',
     function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $compile(nRow)($scope);
     });

Answer 2

我通过遍历每个 td 并调用 $compile 解决了这个问题。使用数据表行回调函数。希望这会有所帮助。

options.fnCreatedCell =  function (nTd, sData, oData, iRow, iCol) {
    $compile(nTd)($scope);
}

//or row

options.fnCreatedRow = function( nRow, aData, iDataIndex ) {
    $compile(nRow)($scope);
}

Answer 3

没有调用控制器中的 delete 函数，因为 AngularJS 不知道 DataTables 将这些元素插入 DOM 的任何事情，因此这些元素中的 ngClick 指令不会被编译和链接。所以改变：

dataTable.fnAddData(data.aaData);

到

dataTable.fnAddData(data.aaData);
$compile(element)(scope);

并注入 $compile 服务：

.directive('datatable', function () {

到

.directive('datatable', function ($compile) {

并且您的删除功能在 jsFiddle 中被破坏了，希望在您的实际项目中不是这种情况！

Answer 4

您可能想看看 Zdam 在this Google Groups thread 上的前几篇帖子，尤其是他/她的两个链接的 jsFiddles。我基本上复制了它们，它们在基本水平上工作。我还没有尝试从点击一行开始执行一些操作。

我看到您实现了一种稍微不同的方法，完全重新创建了<table> HTML 节点。不确定这是否会导致问题。

顺便说一句，在scope.$watch 调用中，我必须确保第三个参数设置为true，以便对返回的resource$ 对象进行值比较（而不是引用比较）。不知道为什么你不需要那个。

Answer 5

在 aoColumns 中提供 fnCreatedCell 或提供给 mRender 的 fnCreatedRow

1 )fnCreatedCell 是基于列的

前：

tableElement.dataTable({
                "bDestroy": true,
                oLanguage : {
                       sLengthMenu : '_MENU_ records per page'
                },
               aoColumnDefs: [
         {
               bSortable: false,
               aTargets: [ -1,-2,-3 ],
               "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)         
                         {  
                            $compile(nTd)($scope)
                          }
          }
        ],

2 ) fnCreatedRow 是一个“顶级”回调

tableElement.dataTable({
                "bDestroy": true,
                oLanguage : {
                       sLengthMenu : '_MENU_ records per page'
                },
        aoColumnDefs: [
        {
          bSortable: false,
          aTargets: [ -1,-2,-3 ]
         }
         ],
         "fnCreatedRow": function( nRow, aData, iDataIndex ){
                    compile(nRow)(scope);
            },