동일한 요소의 다른 지시문에서 ng-table 지시어를 동적으로 만듭니다.

Question

ng-table 지시문에 대한 래퍼 지시문을 만들려고합니다. 내 래퍼는 첫 번째 지시문을 적용하고 ng-table에 사용자 정의 구성을 추가 할 때 동일한 요소에서 ng-table 지시문을 인스턴스화해야합니다.

다음 코드를 사용하여 ng-table 지시어를 만듭니다.

angular.module('main') 
.directive('mkTable', function($compile) { 
    return { 
     'link': function ($scope, element, attributes) { 
      element.removeAttr('mk-table'); // Must remove attribute because of recursion 
      element.attr('ng-table', 'tableParams'); 

      $compile(element)($scope); 
     } 
    } 
}) 

페이지 생성으로 볼 수 있지만 데이터가 표시되지 않습니다. 콘솔 출력을 확인하면 getData() 함수가 호출 된 것을 볼 수 있습니다.

문제는 하위 요소 (tr, td)를 컴파일하고 새로운 ng 테이블 범위로 경계한다고 가정하지만 해결책을 찾지 못했습니다.

데모 : http://plnkr.co/1aEAdr2ugl39WG9Ay0vN

Answer 1

나는 문제가 몇 배의 컴파일되고 tr 요소 ng-repeat 생각, 그래서 각도 바인딩 -

<tr fake-ng-repeat="user in $data"> 
    <td data-title="'Name'">{fake{user.name}}</td> 
    <td data-title="'Age'">{fake{user.age}}</td> 
</tr> 

을 파괴하는 "가짜"-insert 조금 장난 꾸러기 트릭을 :)했다

그런 다음 지시어에 재 컴파일하기 전에 모든 "가짜 (들)"을 제거합니다

element.html(element.html().replace(/fake-?/g, '')); 

Demo합니다.

효과가 있지만 더러운 속임수라고 생각합니다.

Answer 2

많은 실험을 한 후에 알아 냈습니다. 해결책은 링크의 insted 컴파일 함수를 사용하는 것입니다.

angular.module('main') 
.directive('mkTable', function($compile) { 
    return { 
     compile: function(element, attributes) { 
      element.removeAttr('mk-table'); 
      element.attr('ng-table', 'tableParams'); 

      var compileFn = $compile(element); 

      return function($scope, element, attributes) { 
       compileFn($scope); 
      } 
     } 
    } 
}) 

업데이트 데모 : http://plnkr.co/vL4kg0KVp4GYEDpOlIrm