Ng-click не работает AngularJS и dataTables

Я написал директиву dataTables для AngularJS. Он работает отлично, за исключением того, что я пытаюсь добавить кнопку в строку, которая удаляет строку с помощью 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);
                }
            });
        }
    }
})

Ответы

Ответ 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);
     });

Ответ 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

Функция удаления в вашем контроллере не вызывается, потому что AngularJS ничего не знает о вводе этих элементов в DataTables в DOM, поэтому директива ngClick внутри этих элементов не компилируется и не связывается. Итак, измените:

dataTable.fnAddData(data.aaData);

Для

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

И для того, чтобы вставить $compile service:

.directive('datatable', function () {

Для

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

И ваша функция удаления нарушена в jsFiddle, надеюсь, что это не так в вашем реальном проекте!

Ответ 4

Возможно, вы захотите взглянуть на первую пару сообщений Zdam на этот поток Google Groups, особенно на его/ее два связанных jsFiddles, Я в основном скопировал их, и они работают на базовом уровне. Я еще не попытался выполнить некоторые действия, начиная с щелчка по строке.

Я вижу, что вы внедрили немного другой подход, воссоздав <table> HTML node вообще. Не уверен, что это вызывает проблемы.

Кстати, по вызову scope.$watch мне пришлось убедиться, что для третьего параметра установлено значение true, чтобы провести сравнение значений (вместо сравнения ссылок) с возвращаемым ресурсом $object. Не знаете, почему вам это не нужно.

Ответ 5

fnCreatedCell будет поставляться в aoColumns или fnCreatedRow, поставляемом в mRender

1) fnCreatedCell основан на столбцах

ex:

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);
            },