Eu tenho uma tabela construída com AngularJS Datatables da seguinte forma:
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>';
}
Em botões de ação, na função botoesDeAcao(), eu estou adicionando ng-click aos dois botões com o alias/apelido que dei ao controller, no caso, concessões.
No entanto, a função no controller não parece responder ao clique no botão.
$scope.editarProjeto = function(projetoId){
console.log(projetoId);
}
Erro algum é exibido.
Convém notar que o ID é passado para a função no botão: <button ng-click="concessao.editarProjeto(5026)">Editar</button>