ng使用服务器端处理在数据表中进行剪辑

ng-clip in datatables using server-side processing

本文关键字：数据表 服务器端 处理 ng      更新时间：2023-09-26

我有AngularJS前端应用程序和PHP后端。此外，我使用ng剪辑（零剪贴板）和数据表进行服务器端处理。所有行都是从服务器端返回的，其中一行的输出如下所示：

"aaData": [
    {
        "id": 287,
        "email": "random@email.com",
        "displayName": "Name Surname",
        "role": "Some Role",
        "school": "Some school",
        "section": "Some section,
        "token": "<button class='"btn btn-sm btn-default'" type='"button'" clip-copy='"'https://somesite.com/register?token=DPXpGssPzQYrkiH6Oktw9mvtw5BzWLAb ''"><i class='"fa fa-copy'"></i></button>",
        "datetime": "06.10.2014 20:51",
        "actions": "<button class='"btn btn-sm btn-default'" type='"button'"><i class='"fa fa-pencil'"></i></button>'n                                <button class='"btn btn-sm btn-danger btn-default'" type='"button'"><i class='"fa fa-trash-o'"></i></button>"
    },

因为那个数据表得到了输出，所以剪辑插件不起作用。我不知道为什么它不起作用，但看起来数据表行是在ng剪辑后加载的，这是在页面加载时加载的，所以

问题是，我如何重新初始化ng剪辑，使每一行的按钮都能工作，或者我如何解决这个问题？

"token": "<button class='"btn btn-sm btn-default'" type='"button'" clip-copy='"'https://somesite.com/register?token=DPXpGssPzQYrkiH6Oktw9mvtw5BzWLAb ''"><i class='"fa fa-copy'"></i></button>"

按钮应复制每行不同的clip-copy=""的内容。

Plunkr

这表明第一个按钮确实进行了复制，并且数据表行中的复制按钮不起作用

事实上，因为您在angular之后加载数据，所以它不会编译clip-copy指令。要强制执行此行为，可以在表的每个redraw上重新编译表元素。

基本上，使用Datatables和$compile提供的fnDrawCallback选项。

.withOption('fnDrawCallback', function(table) {
  $compile(angular.element(table.nTable).contents())($scope);
})

这是您更新的Plunkr

附带说明一下，您不必像使用<thead>那样在HTML中显式地编写任何内容，它是自动生成的。您还应该查看ngAnnotate，以防止使用冗余的基于数组的语法。

相关文章：