Я создаю сайт с помощью angularjs, и я получаю данные из веб-службы. Мне нужно заполнить эти данные для данных и создать кнопку редактирования для каждой строки. После некоторого расследования я придумал этот
Проблема в том, что ng-click не работает, вероятно, потому, что мне нужно скомпилировать html i, введенный в ячейку таблицы. Я пробовал это несколькими способами, но, к сожалению, я все еще очень новичок в angular, и, похоже, я не понимаю, как это сделать. Мне действительно нужна помощь в этом.
Это моя директива:
dialogApp.directive('myTable', function ($compile) {
return {
restrict: 'E, A, C',
link: function (scope, element, attrs, controller) {
var dataTable = element.dataTable(scope.options);
scope.$watch('options.aaData', handleModelUpdates, true);
function handleModelUpdates(newData) {
var data = newData || null;
if (data) {
dataTable.fnClearTable();
dataTable.fnAddData(data);
}
}
},
scope: {
options: "="
}
};});
Контроллер:
dialogApp.controller('DataTableTestController', ['$scope', function($scope){
$scope.coisas = "coisas";
$scope.botaoEdit = function(a){
console.log(a);
};
$scope.options = {
"sDom": '<"H"lf>t<"F"ip>',
"bStateSave": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
aoColumns: [{
"sTitle": "name"
}, {
"sTitle": "price"
}, {
"sTitle": "category"
}, {
"sTitle": "action"
}, null],
"aaSorting": [[ 0, "asc" ]],
aoColumnDefs: [
{ "bSortable": true, "aTargets": [0] },
{ "bSortable": false, "aTargets": [1,2,3,4] }
],
bJQueryUI: true,
aaData: []
};
var dbStuff = [
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna":"buy"
},
{
"name": "Stuff2",
"price": 20000000.00,
"description": "Oh my...",
"wanna":"have money"
}
]
for (var key in dbStuff){
$scope.options.aaData.push([dbStuff[key].name,
dbStuff[key].price,
dbStuff[key].description,
dbStuff[key].wanna,
"<button ng-click=\"botaoEdit("+dbStuff[key].name+")\">test button</button>"
]);
}
$scope.counter = 0; }])
И HTML:
<link type="text/css" href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css'; return false;" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css'; return false;">
<div ng-app="tableExample">
<div ng-controller="DataTableTestController">
{{ coisas }}
<table my-table options="options" class="jquery-datatables"></table>
</div>
</div>