ng-click不工作AngularJS和dataTables

Question

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

在我看来,问题出现是因为表行现在不是范围.

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

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

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

dataTable.fnAddData(data.aaData);

到

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

并注入 $compile 服务：

.directive('datatable', function () {

到

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

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