[英]ng-clip in datatables using server-side processing
I have AngularJS frontend app with PHP backend. 我有带PHP后端的AngularJS前端应用程序。 Also I use ng-clip ( zeroclipboard ) and datatables with server-side processing. 另外,我在服务器端处理中使用ng-clip(zeroclipboard)和数据表。 All rows are returned from server side and one output of row looks like this: 所有行都是从服务器端返回的,行的一个输出如下所示:
"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>"
},
And because that datatatables gets output ng-clip plugin isn't working. 而且由于该数据可获取,因此ng-clip插件无法正常工作。 I don't know why it's not working but looks like datatable rows are loaded after ng-clip, that is loaded on pageload, so 我不知道为什么它不起作用,但是看起来像数据表行是在ng-clip之后加载的,它是在pageload上加载的,所以
Question is how can I re-init ng-clip so each row's button would work, or how can I could make workaround for this ? 问题是如何重新初始化ng-clip以便每行的按钮都可以工作,或者如何解决此问题?
"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>"
Button should copy contents of clip-copy=""
which differs in each row. 按钮应复制clip-copy=""
内容,每行的内容不同。
This demonstrates that first button does copy, and copy buttons in datatable rows aren't working 这表明第一个按钮确实进行了复制,并且数据表行中的复制按钮不起作用
Indeed, because you load the data after angular, it will not compile the clip-copy
directive. 确实,由于在角度之后加载数据,因此不会编译clip-copy
指令。 To force this behavior, you can recompile your table element on each redraw
of your table. 要强制执行此行为,您可以在表的每次redraw
时重新编译表元素。
Basically, use the fnDrawCallback
option provide by Datatables , and $compile
. 基本上,使用Datatables提供的fnDrawCallback
选项和$compile
。
.withOption('fnDrawCallback', function(table) {
$compile(angular.element(table.nTable).contents())($scope);
})
Here is your updated Plunkr 这是您更新的Plunkr
As a side note, you don't have to explicitly write anything in your HTML like you did with the <thead>
, it's automatically generated. 附带说明一下,您不必像自动生成的<thead>
一样在HTML中显式编写任何内容。 You should also take a look at ngAnnotate to prevent you to use the redundant array-based syntax . 您还应该查看ngAnnotate,以防止使用基于数组的冗余语法 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.