I have a table built with AngularJS Datatables as follows:
HTML
<table datatable="" dt-options="concessoes.standardOptions" dt-columns="concessoes.standardColumns" dt-instance="concessoes.dtInstance" class="table table-condensed table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand"> Processo</th>
<th data-class="expand"> Objeto</th>
<th data-hide="phone"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> UF</th>
<th>Região</th>
<th data-hide="phone,tablet"> Macrossegmento</th>
<th data-hide="expand"> </th>
</tr>
</thead>
</table>
JavaScript / Controller
vm.standardOptions = DTOptionsBuilder
// TODO: Passar a Url para um serviço e trazer os dados do serviço
.fromSource('/api/BasesDados/Concessoes/concessoes.php')
.withOption('scrollX', '100%')
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap()
.withButtons([
{extend: 'colvis', text: 'Vizualização'},
{extend: 'copy', text: 'Copiar'},
{extend: 'print', text: 'Imprimir'},
{extend: 'excel', text: 'MS Excel'},
{
text: 'Incluir projeto',
key: '1',
action: function (e, dt, node, config) {
$scope.adicionarProjeto();
}
}
]);
// Conlunas que serão mostradas
vm.standardColumns = [
DTColumnBuilder.newColumn('id').notVisible(),
DTColumnBuilder.newColumn('processo'),
DTColumnBuilder.newColumn('objeto'),
DTColumnBuilder.newColumn('uf'),
DTColumnBuilder.newColumn('regiao'),
DTColumnBuilder.newColumn('macro'),
DTColumnBuilder.newColumn(null).withTitle('Ações').notSortable().renderWith(botoesDeAcao)
];
// 2. Renderiza as opções de ações disponíveis para o usuário no DOM, como incluir, editar e excluir
// Botões de ação da última coluna: editar e excluir registro
function botoesDeAcao(data, type, full, meta) {
vm.projeto[data.id] = data;
return '<button class="btn btn-info btn-xs" ng-click="concessoes.editarProjeto(' + data.id + ')">' +
' <i class="fa fa-edit"></i>' +
'</button> ' +
'<button class="btn btn-danger btn-xs" ng-click="concessoes.excluirProjeto(' + data.id + ')">' +
' <i class="fa fa-trash-o"></i>' +
'</button>';
}
In action buttons, in the function buttons (), I'm adding ng-click to the two buttons with the alias / nickname I gave the controller, in this case, concessions.
However, the function in the controller does not seem to respond to the click of the button.
$scope.editarProjeto = function(projetoId){
console.log(projetoId);
}
No error is displayed.
Note that the ID is passed to the function on the button: <button ng-click="concessao.editarProjeto(5026)">Editar</button>