Пользовательский атрибут AngularJS angular-datatables в кнопках

Я использую следующее с npm:

"dependencies": {
    "angular": "1.6.4",
    "datatables.net": "1.10.19",
    "datatables.net-buttons": "1.5.3",
    "datatables.net-buttons-dt": "1.5.3",
    "angular-datatables": "0.6.2",
    // and more that is not question related
}

Теперь, когда я создаю DataTable, как показано в примерах angular-datatables, все работает отлично.
Например:

vm.dtOptions = DTOptionsBuilder
    .newOptions()
    // data fetch and processing animation and ...
    .withButtons([
        'colvis',
        'copy',
        'print',
        'excel',
        'pdf',
        {
            text: 'Some button',
            key: '1',
            action: function (e, dt, node, config) {
                alert('Button activated');
            },
            className: 'someCustomCssClass',
        },
    ])
    .withBootstrap();
vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];

Теперь я хочу изменить настраиваемую кнопку "Некоторая кнопка".
Я хочу, чтобы у кнопки был собственный атрибут HTML.

Текущая кнопка отображается следующим образом:

<button class="dt-button someCustomCssClass ng-scope" tabindex="0" aria-controls="DataTables_Table_0" type="button">
    <span>Some button</span>
</button>

Но у кнопки должен быть атрибут "доступ", чтобы скрывать/показывать кнопку в зависимости от роли пользователя.
Так должно быть, например:

<button access="ROLE_ADMIN" class="dt-button someCustomCssClass ng-scope" tabindex="0" aria-controls="DataTables_Table_0" type="button">
    <span>Some button</span>
</button>

Но как я могу добавить к кнопке новый атрибут?
Добавить пользовательский класс CSS легко с помощью "className", но это совершенно новый атрибут?

Спасибо за помощь и
приветствия

ОБНОВЛЕНИЕ

В настоящее время я добавляю полностью пользовательскую кнопку, подобную этой:

var myEl = angular.element( document.querySelector( '.dataTables_wrapper > .dt-buttons' ) );
myEl.append('<button with all my needs></button>');
$compile(myEl.contents())(scope);

Это работает, но теперь я не могу использовать информацию DataTable, а сама интеграция очень плохая.
Кроме того, это обходной путь, а не хорошее решение!
Я действительно надеюсь, что init, о котором упоминается @davidkonrad, может решить это.


javascript angularjs angular-datatables
person christopher2007    schedule 11.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте обратный вызов init для кнопок, которые вы хотите обогащать пользовательскими атрибутами:

.withButtons([
    'colvis',
    'copy',
    'print',
    'excel',
    'pdf',
    {
        text: 'Some button',
        key: '1',
        action: function (e, dt, node, config) {
            alert('Button activated');
        },
        className: 'someCustomCssClass',
        //-----------------------------------
        init: function(dt, node, config) {
            node.attr('access', "ROLE_ADMIN")
        }
    },
])
person davidkonrad    schedule 11.07.2018
comment
при этом атрибут добавляется, но моя директива не срабатывает. так что в DOM все выглядит отлично, но без работающего функционала. В настоящее время я использую сервис, который может компилировать кнопки с тайм-аутом. Но это не очень хорошее решение. Так может есть другой способ? сама инициализация является отличным первым шагом. - person christopher2007; 11.07.2018
comment
@ christopher2007, К сожалению, нет. если вы хотите добавить директивы к кнопкам, у вас нет других вариантов, кроме $compile с $timeout. DT - это jQuery до крайности, angular-datatables - это оболочка, которая выполняет грязную работу, поэтому она не конфликтует с циклами пищеварения angularjs; buttons — это еще один уровень поверх того, который не невозможно изменить или заключить в директиву, поскольку он управляется из ядра DT. Фактически, настройка расширения кнопок, помимо управления параметрами и т. д., также невозможна в версии jQuery (если только вы не перепишете расширение самостоятельно). - person davidkonrad; 11.07.2018
comment
хорошо, большое спасибо. Я боялся услышать именно этот ответ :) Может быть, вы знаете хорошую альтернативу dt на чистом AngularJS? В противном случае я получил себе грязный обходной путь. Совсем не горжусь... - person christopher2007; 11.07.2018
comment
@ christopher2007, спасибо, что приняли ответ! Я перепробовал все попытки директивы angularjs сделать что-то вроде DataTables, но DT по-прежнему остается лучшим в мире. Он превосходит все по скорости и гибкости. Если бы L-Lin не сделал директивы-оболочки для DT, я бы сделал их сам (или, по крайней мере, попытался :) Я могу жить с $timeouts в коде, и что нам иногда нужно сделать уродливый jQuery, который конфликтует с декларативным угловой способ. Это не очень красиво, но в конечном итоге это в основном косметическая или эстетическая проблема, конечному пользователю все равно :) - person davidkonrad; 11.07.2018