javascript ng-click 不起作用 AngularJS 和 dataTables
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14478544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-click not working AngularJS and dataTables
提问by user1266573
I wrote a dataTables directive for AngularJS. Its working fine except that i trying to add an button to the row that removes an row with an ng-click.
我为 AngularJS 编写了一个 dataTables 指令。它工作正常，除了我尝试向行中添加一个按钮，该行通过 ng-click 删除一行。
In my opinion is that the problem occurs because the table row doesn't now the scope.
在我看来，问题的发生是因为表格行现在不在范围内。
Can somebody help me out solving this problem.
有人可以帮我解决这个问题。
jsFiddle Example: http://jsfiddle.net/A5Zvh/7/
jsFiddle 示例：http: //jsfiddle.net/A5Zvh/7/
My directive looks like this.
我的指令看起来像这样。
angular.module('DataTables', [])
.directive('datatable', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
require: 'ngModel',
template: '<table></table>',
link: function(scope, element, attrs, model) {
var dataTable = null,
options;
var buttons = jQuery.parseJSON(attrs['buttons']) || null;
options = {
"bJQueryUI": false,
"sDom": "<'row-fluid'<'span4'l><'span8 filter' <'pull-right'T> <'pull-right'f>>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oTableTools": {
}
};
if(_.has(attrs, 'datatableOptions')) {
jQuery.extend(true, options, scope.$eval(attrs['datatableOptions']));
}
scope.$watch(attrs.ngModel, function(data) {
if(data && _.size(data.aaData) > 0 && _.size(data.aoColumns) > 0) {
_.extend(options, scope.$eval(attrs.ngModel))
dataTable = $(element).dataTable(options);
dataTable.fnClearTable();
dataTable.fnAddData(data.aaData);
}
});
}
}
})
回答by Nabil.A
I'm using Angular-datatbles, and I was trying to dynamically add, Edit & Remove links to the datatble rows and display modal on ng-click;
我正在使用Angular-datatables，我试图动态添加、编辑和删除指向数据表行的链接并在 ng-click 上显示模式；
This was the solution for my case;
这是我的情况的解决方案；
$scope.dtOptions.withOption('fnRowCallback',
function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$compile(nRow)($scope);
});
All the datatable binding code;
所有数据表绑定代码；
$scope.reloadData = function () {
$scope.dtOptions.reloadData();
};
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(2).renderWith(function (data, type, row) {
var html = '<a href="" class="txt-color-blue pull-left" ng-click="editModal()"><i class="fa fa-pencil hidden-xs"></i> Edit</a>' +
'<a href="" class="txt-color-red padding-top-15" ng-click="removeModal()"><i class="fa fa-times hidden-xs"></i> Remove</a>';
return html;
})
];
$scope.dtColumns = [
DTColumnBuilder.newColumn('name').withTitle('Name'),
DTColumnBuilder.newColumn('type').withTitle('Type'),
DTColumnBuilder.newColumn('id').withTitle(''),
];
$scope.dtOptions.withOption('fnRowCallback',
function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$compile(nRow)($scope);
});
回答by viphak
I solved this by going through each td and calling $compile. Using the datatable row callback function. Hope this helps.
我通过遍历每个 td 并调用 $compile 解决了这个问题。使用数据表行回调函数。希望这可以帮助。
options.fnCreatedCell = function (nTd, sData, oData, iRow, iCol) {
$compile(nTd)($scope);
}
//or row
options.fnCreatedRow = function( nRow, aData, iDataIndex ) {
$compile(nRow)($scope);
}
回答by Dan
The delete function in your controller isn't called because AngularJS doesn't know anything about DataTables's insertion of those elements to the DOM, thus ngClick directive within those elements isn't compiled and linked. So change:
控制器中的 delete 函数没有被调用，因为 AngularJS 对 DataTables 将这些元素插入到 DOM 一无所知，因此这些元素中的 ngClick 指令没有被编译和链接。所以改变：
dataTable.fnAddData(data.aaData);
To
到
dataTable.fnAddData(data.aaData);
$compile(element)(scope);
And to inject $compile service:
并注入 $compile 服务：
.directive('datatable', function () {
To
到
.directive('datatable', function ($compile) {
And your delete function is broken in the jsFiddle, hope that's not the case in your actual project!
并且您的删除功能在 jsFiddle 中已损坏，希望您的实际项目中不是这种情况！
回答by superjos
You might want to give a look at the first couple of Zdam's post on this Google Groups thread, especially to his/her two linked jsFiddles. I basically copied them and they work at a basic level. I have not tried yet to get some action starting from a click on a row.
您可能想看看 Zdam 在Google Groups thread上的前几篇帖子，尤其是他/她的两个链接的 jsFiddles。我基本上复制了它们，它们在基本水平上工作。我还没有尝试从单击一行开始执行某些操作。
I see that you implemented a slightly different approach, recreating the <table>HTML node altogether. Not sure if this is causing issues.
我看到您实现了一种稍微不同的方法，<table>完全重新创建了HTML 节点。不确定这是否会导致问题。
By the way, on the scope.$watchcall I had to make sure there was a third parameter set to true, in order to make value comparison (instead of reference comparison) on the returned resource$ object. Not sure why you don't need that.
顺便说一下，在scope.$watch调用时，我必须确保将第三个参数设置为 true，以便对返回的资源 $ 对象进行值比较（而不是引用比较）。不知道为什么你不需要那个。
回答by AKA
fnCreatedCell be supplied in aoColumns or fnCreatedRow supplied to mRender
fnCreatedCell 提供给 aoColumns 或 fnCreatedRow 提供给 mRender
1 )fnCreatedCell is column based
1 )fnCreatedCell 是基于列的
ex :
前任 ：
tableElement.dataTable({
"bDestroy": true,
oLanguage : {
sLengthMenu : '_MENU_ records per page'
},
aoColumnDefs: [
{
bSortable: false,
aTargets: [ -1,-2,-3 ],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
{
$compile(nTd)($scope)
}
}
],
2 ) fnCreatedRow is a 'top level' callback
2 ) fnCreatedRow 是一个“顶级”回调
tableElement.dataTable({
"bDestroy": true,
oLanguage : {
sLengthMenu : '_MENU_ records per page'
},
aoColumnDefs: [
{
bSortable: false,
aTargets: [ -1,-2,-3 ]
}
],
"fnCreatedRow": function( nRow, aData, iDataIndex ){
compile(nRow)(scope);
},
