0

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>&nbsp;' +
           '<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>

0

1 Resposta 1

0

Eu fiz a mesma pergunta no StackOverflow e obtive a resposta correta.

Só tive que fazer o seguinte, segundo a resposta:

function createdRow(row, data, dataIndex) {
    $compile(angular.element(row).contents())($scope);
}

Apesar de eu mesmo ter encontrado a solução, os palpites do pessoal no StackOverflow ajudaram muito.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .