Кнопки добавлены в таблицу, генерируемый AngularJS DataTables не выполняют функции в текущем escope

Question

EDIT

Я пытался обновить функцию actionButtons():

function actionButtons(data, type, full, meta) { 
    vm.project[data.id] = data; 
    var html = '<button class="btn btn-info btn-xs" ng-click="project.editProject(' + data.id + ')">' + 
      ' <i class="fa fa-edit"></i>' + 
      '</button>&nbsp;' + 
      '<button class="btn btn-danger btn-xs" ng-click="project.deleteProject(' + data.id + ')">' + 
      ' <i class="fa fa-trash-o"></i>' + 
      '</button>'; 
    el = $compile(html)($scope); 
    return el; 
} 

Теперь это делает [Object][Object] вместо кнопки HTML. По крайней мере, это привело к другому результату.

ОРИГИНАЛЬНЫЙ ПОСТ

У меня есть таблица, построенный с AngularJS Datatables как это следующим образом:

HTML

<div ng-controller="ProjectCtrl as project"> 
    <table datatable="" dt-options="project.standardOptions" dt-columns="project.standardColumns" dt-instance="project.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> 
</div> 

JavaScript/контроллер

.controller('ProjectCtrl', function($scope){ 
    vm.standardOptions = DTOptionsBuilder 
      // TODO: Get the data below from a service 
      .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: 'View'}, 
       {extend: 'copy', text: 'Copy'}, 
       {extend: 'print', text: 'Print'}, 
       {extend: 'excel', text: 'MS Excel'}, 
       { 
        text: 'Add project', 
        key: '1', 
        action: function (e, dt, node, config) { 
         $scope.addProject(); 
        } 
       } 
      ]); 

    // Rendered columns. ID is not shown 
    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(actionButtons) 
    ]; 

    // Action buttons added to the last column: to edit and to delete rows 
    function actionButtons(data, type, full, meta) { 
     vm.project[data.id] = data; 
     return '<button class="btn btn-info btn-xs" ng-click="project.editProject(' + data.id + ')">' + 
       ' <i class="fa fa-edit"></i>' + 
       '</button>&nbsp;' + 
       '<button class="btn btn-danger btn-xs" ng-click="project.deleteProject(' + data.id + ')">' + 
       ' <i class="fa fa-trash-o"></i>' + 
       '</button>'; 
    } 
}); 

Кнопки действий, добавленные функцией actionButtons(), в последний столбец таблицы получают каждое действие: удаление и редактирование.

Однако функции, кажется, не реагировать на щелчок на этих кнопках действий:

// Edit a project 
$scope.editProject= function(projetoId){ 
    console.log(projetoId); 
} 
// Delete a project 
$scope.deleteProject= function(projetoId){ 
    console.log(projetoId); 
} 

Обратите внимание, что кнопки получить параметры:

<button ng-click="project.editProject(5026)">Editar</button> 

Это должно быть концептуальным недоразумением на облаках AngularJS. Что я делаю неправильно в этом случае?

Код не вызывает ошибок, как я могу заметить, на выходе в консоли браузера (Google Chrome 56. , Mozilla Firefox 50., MSIE 11. *).

Мой код работает на IIS 8.5 (это не имеет значения, я думаю).

Answer 1

Найдено решение.

Accordin к документации AngularJS DataTables, следующая функция компилируется каждую строку:

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

Затем вы должны добавить его в опциях:

vm.standardOptions = DTOptionsBuilder 
     .fromSource(urlToTheData) 
     .withOption('createdRow', createdRow) // Here, I recompile the table's rows 
     .withOption('scrollX', '100%') 
     ... 

Я также должен был удалить псевдоним контроллера от ng-click:

От <button ng-click="project.editProject(5026)">Edit</button>

<button ng-click="editProject(5026)">Edit</button>.

Благодарим @AsielLealCeldeiro Я добавил компиляцию $ (искал документы для нее) и благодаря @Yaser я использовал сервис компиляции.

Спасибо, сообщество StackOverflow!