我有一个DataTable,我使用Angular Js加载它,我已经创建了一个指令并将我的DataTable包装在这个指令中,这是一种在指令中包装JQuery插件的常用方法,以便它可以存在于Angular Digest Cycle
中。但是按钮上的ng-click
来自数据表中的render Function of column
不是clickable
(Not Working,Angular没有编译它)。有没有办法让它成为Clickable
。我知道我们在数据表中使用{{}} with ng-repeat
to填充数据的方法。我正在寻找一个directive way
,所以你可以告诉我什么是停止工作中的点击或如何使我的指令正确!请坚持指导方针。代码如下。
App.directive('jqtable', function () {
return {
restrict: 'E, A, C',
link: function (scope, element, attrs, controller) {
var dataTable = element.dataTable(scope.options);
scope.$watch('options.data', handleModelUpdates, true);
function handleModelUpdates(newData) {
var data = newData || null;
if (data) {
dataTable.fnClearTable();
dataTable.fnAddData(data);
}
}
},
scope: {
options: "="
}
};
});
这是我的控制器: -
$scope.options = {
aoColumnDefs: [{
"bSortable": true,
"aTargets": [ 1],
"render": function ( data, type, full, meta ) {
if(meta.col==1){
return data+" <a class='btn btn-sm btn-default' ng-click='showalert()' >Click me </a>"
}
}
}],
bJQueryUI: true,
bDestroy: true,
data:$scope.data
};
$scope.showalert=()=>
{
alert("Angular Compiled the Html");
}
Angular不知道你已经向DOM注入了元素。你必须每排$compile
。你可以在rowCallback
做到这一点。由于DataTables可能在表被过滤,排序或页面更改时注入新行,因此您可以添加compiled
标志以防止多次$编译行:
$scope.options = {
rowCallback: function(row) {
if (!row.compiled) {
$compile(angular.element(row))($scope);
row.compiled = true;
}
}
...
}