2017-03-05 4 views
0

각도 앱은 테이블을 표시하기 위해 데이터 테이블 플러그인을 사용하는 jquery 앱에 삽입되었습니다. 이 표에서는 페이지가로드되고 서버 측 AJAX 호출이 완료된 후 단추 및 링크 용 HTML이 생성됩니다.지시어를 처리하는 방법 (jQuery Datatables를 사용하여) HTML이로드 된 후 지시어를 처리하는 방법?

생성 된 HTML 버튼에 적용되는 속성 레벨 지시문 my-directive을 작성했습니다. like <button my-directive>delete</button>

Angular APP가 초기화 된 후에 HTML이 생성되기 때문에 my-directive 속성은 효과적이지 않습니다.

AJAX 호출이 완료된 후 어떻게 지시문을 처리 할 수 ​​있습니까?

(I은 데이터 테이블의 drawCallback 방법에서 AJAX 호출 완료 이벤트를 캡처하고 있습니다.

+0

대신에 우리가 갑자기 생각시키는의, 코드를 – davidkonrad

+0

@davidkonrad을 보여주십시오 : 관련 - http://stackoverflow.com/questions/42648788/datatabes-how-to-get-pagination-working- when-table-html-is-compul-with-angul –

답변

0

을이 솔루션은

  1. 다시 컴파일 각도를 사용하여 데이터 테이블에 의해 생성 된 HTML을.
  2. HTML을 컴파일 된 버전으로 바꿉니다.

이렇게하려면 데이터 테이블 구성에 다음 코드를 추가해야합니다 -

var exampleTable = $("#table_id").DataTable({ 
"drawCallback": function(settings) { 

      angular.element(document).injector().invoke(['$compile', function ($compile) { 
        // Create a scope. 
        var $scope = angular.element(document.body).scope(); 
        // Specify what it is we'll be compiling. 
        var to_compile = $("#table_id").html(); 
        // Compile the tag, retrieving the compiled output. 
        var $compiled = $compile(to_compile)($scope); 
        // Ensure the scope and been signalled to digest our data. 
        $scope.$digest(); 
        // Replace the compiled output to the page. 
        $("#table_id").html($compiled); 
       }]) 

     }