12

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

5 回答 5

24

我正在使用Angular-datatbles，我正在尝试动态添加、编辑和删除指向 datatble 行的链接并在 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);
     });
于 2014-09-02T16:46:07.310 回答
5

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

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

//or row

options.fnCreatedRow = function( nRow, aData, iDataIndex ) {
    $compile(nRow)($scope);
}
于 2013-08-02T01:32:54.407 回答
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 中被破坏了，希望在您的实际项目中不是这种情况！

于 2013-02-06T20:11:41.900 回答
0

你可能想看看 Zdam 在这个 Google Groups 线程上的前几篇帖子上的前几篇文章，尤其是他/她的两个链接的 jsFiddles。我基本上复制了它们，它们在基本水平上工作。我还没有尝试从点击一行开始采取一些行动。

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

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

于 2013-03-04T19:32:29.780 回答
0

fnCreatedCell 在 aoColumns 或 fnCreatedRow 中提供给 mRender

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);
            },
于 2014-02-18T10:53:04.287 回答