Question

我为AngularJS编写了一个dataTables指令。它的工作正常，除了我试图添加一个按钮到行删除一行与ng点击。

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

有人可以帮我解决这个问题。

我的指示看起来像这样。

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，我正在尝试动态添加，编辑＆amp;删除指向数据行的链接，并在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

控制器中的删除功能未被调用，因为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

你可能想看看this Google Groups thread上Zdam的第一个帖子，特别是他/她的两个链接的jsFiddles。我基本上复制了它们，并且它们在基本级别上工作。我还没有尝试从点击一行开始做一些动作。

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

顺便说一下，在scope.$watch调用时我必须确保第三个参数设置为true，以便在返回的资源$ object上进行值比较（而不是引用比较）。不确定为什么你不需要它。

Answer 5

fnCreatedCell在提供给mRender的aoColumns或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);
            },

ng-click不工作AngularJS和dataTables

5 个答案: