버튼 I는 함수 actionButtons()를 업데이트하려고

Question

EDIT

현재 escope의 기능들을 실행하지 HTML 버튼. 적어도 그것은 다른 결과를 낳았습니다.

ORIGINAL POST

는 다음과 같이 나는 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> 

자바 스크립트/컨트롤러

.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() 함수를 통해 테이블의 마지막 열에 추가 된 작업 단추는 각각 삭제 및 편집 작업을받습니다.

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

그것은 개념 오해합니다 버튼이 매개 변수를받을 수

가

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

참고 :

그러나, 기능은 그 액션 버튼 클릭에 응답하지 않는 것 AngularJS 스코프에 이 경우 내가 뭘 잘못하고 있니?

브라우저 (Google Chrome 56. , Mozilla Firefox 50., MSIE 11. *)의 출력에서 ​​알 수 있듯이 코드가 오류를 발생시키지 않습니다.

내 코드가 IIS 8.5에서 실행되고 있습니다 (별다른 문제가 아님).

Answer 1

해결책을 찾았습니다.

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

나는 또한 컨트롤러 별칭을 제거했다 : 당신은 옵션에 추가 할 필요가 그런

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

다음 AngularJS와 Datatables 문서를 Accordin

는 다음과 같은 기능은 각 행을 컴파일 ng-click :

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

여기까지 <button ng-click="editProject(5026)">Edit</button>.

감사합니다 @AsielLealCeldeiro 나는 $ compile (문서 검색)을 추가했으며 @Yaser 덕분에 컴파일 서비스를 제공했습니다.

감사합니다. StackOverflow 커뮤니티!