Question

我有使用PHP后端的AngularJS前端应用程序。我还使用ng-clip（zeroclipboard）和数据表进行服务器端处理。所有行都从服务器端返回，行的一个输出如下所示：

"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-clip插件不起作用。我不知道为什么它不工作但看起来像数据表行是在ng-clip之后加载的，这是在pageload上加载的，所以

问题是如何重新启动剪辑，以便每行按钮都能正常工作，或者我该如何解决这个问题呢？

"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

这表明第一个按钮复制，数据行中的复制按钮不起作用

Answer 1

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

基本上，请使用数据表和fnDrawCallback提供的$compile选项。

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

这是您更新的 Plunkr

作为旁注，您不必像使用<thead>一样在 HTML 中明确写任何内容，而是自动生成。您还应该查看ngAnnotate以防止使用冗余的基于阵列的语法。

使用服务器端处理的数据表中的ng-clip

1 个答案: