ng-click 不工作 AngularJS 和 dataTables

Posted 2023-05-07

【中文标题】ng-click 不工作 AngularJS 和 dataTables

【英文标题】：ng-click not working AngularJS and dataTables

【发布时间】：2013-01-06 20:43:02

【问题描述】：

我为 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);
                
            );
        
    
)

【问题讨论】：

没有人知道如何解决这个问题？

你看过这篇文章吗？也许，你可以找到一些有用的东西。 ***.com/questions/14242455/…

【参考方案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);
     );

【讨论】：

很高兴听到这个消息。但在这一点上，我更倾向于 angularWay 而不是“dtColumnDefs”。 l-lin.github.io/angular-datatables/#/angularWay

感谢我错过了 FnRowCallback 中的编译。解决了我的问题

【参考方案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);

【讨论】：

我一直在为这个问题头疼。你有让它工作的代码吗？你的似乎是在正确的道路上，但不知道如何从数据表中调用它。谢谢。

【参考方案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 中被破坏了，希望在您的实际项目中不是这种情况！

【讨论】：

我试过这个，但我得到了一个特别讨厌的无限循环

【参考方案4】：

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

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

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

【参考方案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);
            ,  

【讨论】：

角度在哪里？