Datatable의 렌더링 된 열에서 ng-click 사용하기

저는 AngularJS에서 일반 Datatable을 사용하고 있습니다 (각도 데이터 테이블 라이브러리를 사용하지 않음). 한 가지를 제외하고는 모든 것이 지금까지는 좋은 것처럼 보입니다. Datatable의 렌더링 된 열에서 ng-click 사용하기

나는이 데이터 테이블이 있습니다

$scope.siInfoTable = $('#siInfoTable').DataTable({ 
      'columns': [ 
       { 
        "render": function (data, type, row, meta) { 
         data = '<button class="btn btn-primary btn-sm" ng-click="test()">TEST</button>'; 
         return data; 
        } 
       }] 
     });

이것은 $scope.load 방법 내에서 실행되고 페이지가 렌더링되기 전에로드됩니다. 사용자가 데이터 테이블에서 렌더링 된 버튼을 클릭하면 ng-click 지시문을 인식하지 못하는 것 같습니다.

여기에 방법이 있습니까?

출처

2017-10-06 christianleroy

저는 angular-datables 각형 라이브러리를 사용하는 것이 가장 좋습니다.

컨트롤러 또는 지시어의 변경 사항은 출력 HTML에 반영되지 않습니다.
일부 오류는 반복해서 발생합니다.

직면 한 문제의 양을 줄이려면. 다음은 각도 데이터 테이블을 사용하는 스 니펫입니다.

은 $

app.controller('mycontroller', ['$compile', ..., function($compile, ...)

그리고 컨트롤러로 컴파일 주입, 데이터에 영향을 미치는 전에 HTML을 컴파일하려고 $ Angular Datatables Documentation

angular.module('datatablesSampleApp', ['datatables', 'datatables.buttons']). 
 
    controller('sampleCtrl', function($scope, DTOptionsBuilder) { 
 
     $scope.dtOptions = DTOptionsBuilder.newOptions() 
 
      .withPaginationType('full_numbers') 
 
      .withDisplayLength(2) 
 
      .withOption('order', [1, 'desc']).withButtons([{ 
 
     text: '<button class="btn">Some button</button>', 
 
     key: '1', 
 
     action: function(e, dt, node, config) { 
 
      alert('Button activated'); 
 
     } 
 
     }]); 
 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/angular-datatables.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/plugins/buttons/angular-datatables.buttons.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="datatablesSampleApp"> 
 
    <div ng-controller="sampleCtrl"> 
 
     <table datatable dt-options="dtOptions"> 
 
      <thead> 
 
       <tr> 
 
        <th>ID</th> 
 
        <th>First name</th> 
 
        <th>Last name</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>Foo</td> 
 
        <td>Bar</td> 
 
       </tr> 
 
       <tr> 
 
        <td>123</td> 
 
        <td>Someone</td> 
 
        <td>Youknow</td> 
 
       </tr> 
 
       <tr> 
 
        <td>987</td> 
 
        <td>Iamout</td> 
 
        <td>Ofinspiration</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2017-10-06 06:51:08

@christianleroy이 답변으로 도움이 되었습니까? –

에서 촬영 귀하의 html을 컴파일

data = $compile('<button class="btn btn-primary btn-sm" ng-click="test()">TEST</button>')($scope);

출처

2017-10-06 11:07:42 khalil

Datatable의 렌더링 된 열에서 ng-click 사용하기

답변

관련 문제