我正在使用AngularJS的jQuery DataTable指令，效果很好。我面临的问题是无法通过“ ng-click”向“ TR”动态添加javascript函数。好像动态添加的元素无法被角度识别。
有人可以帮我解决这个问题。
指令：
angular.module('ngdemo.directives', []).directive('myTable', function() {
return function(scope, element, attrs) {
// apply DataTable options, use defaults if none specified by user
var options = {};
if (attrs.myTable.length > 0) {
options = scope.$eval(attrs.myTable);
} else {
options = {
"bStateSave": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bDestroy": true
};
}
// Tell the dataTables plugin what columns to use
// We can either derive them from the dom, or use setup from the controller
var explicitColumns = [];
element.find('th').each(function(index, elem) {
explicitColumns.push($(elem).text());
});
if (explicitColumns.length > 0) {
options["aoColumns"] = explicitColumns;
} else if (attrs.aoColumns) {
options["aoColumns"] = scope.$eval(attrs.aoColumns);
}
// aoColumnDefs is dataTables way of providing fine control over column config
if (attrs.aoColumnDefs) {
options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
}
if (attrs.fnRowCallback) {
options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
}
// apply the plugin
var dataTable = element.dataTable(options);
// watch for any changes to our data, rebuild the DataTable
scope.$watch(attrs.aaData, function(value) {
var val = value || null;
if (val) {
dataTable.fnClearTable();
dataTable.fnAddData(scope.$eval(attrs.aaData));
}
});
};
});
在我的控制器中：
app.controller('SourceCtrl', ['$scope', 'SharedFactory','$location','$compile', function ($scope, SharedFactory,$location,$compile) {
$scope.columnDefs = [
{
"mDataProp": "desc",
"aTargets":[0],
},
{ "mDataProp": "name", "aTargets":[1] },
{ "mDataProp": "desc", "aTargets":[2] }
];
$scope.overrideOptions = {
"bServerSide": true,
"iDisplayLength": 2,
"sAjaxSource": "ajaxCall",
"aaSorting": [[ 0, "desc" ]],
"fnServerData": function ( sSource, aoData, fnCallback,oSettings ) {
var startIndex = SharedFactory.fnGetKey(aoData, "iDisplayStart");
var length = SharedFactory.fnGetKey(aoData, "iDisplayLength");
var sortAttr = 'sourceType';//fnGetKey(aoData,"iSortCol_0");
var sortDir = 'DESC';//fnGetKey(aoData,"sSortDir_0");
sSource="ajaxCall";
$.getJSON(sSource, function (aoData) {
aoData.iTotalRecords = aoData.size;
aoData.iTotalDisplayRecords = aoData.size;
fnCallback(aoData);
});
},
"sAjaxDataProp": "aaData",
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$(nRow).attr('ng-click','selectRow()');
}
};
$scope.selectRow = function() {
alert("");
};
}]);
好吧，动态创建的东西（尤其是jquery ui）对angular一无所知。这是因为在处理时对节点进行了角化编译。因此，这里有很少的选择：
1）在添加一些动态内容之前，您可以对其进行编译。在这种情况下，angular可以了解它，并且所有功能（例如指令，绑定等）都可以使用。
row.push($compile(content)($scope)[0].innerHTML);
在此示例中，我们将已编译的内容添加到行（单元格）。并且内容可以具有任意数量的角度指令。但是您应该仔细传递正确的作用域，以使指令按预期工作。
另一种方法是只处理纯js。在这种情况下，您只需声明onclick处理程序，并在它们内部查找必要的范围并在其上调用方法：
angular.element('item').scope().handleClick(row);
并且从非角度部分调用代码时，应将其包装到$ scope。$ apply中：
$scope.handleClick = function(row) {
$scope.$apply(function() {
... place handling logic here
});
}
但我最好建议迁移到角度数据网格（例如ngGrid）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句