AngularJS - 지시어 내에서 각 반복 반복에 요소 추가

Question

지시문과 함께 <tr> 요소 내부에서 ng-repeat를 사용하고 있습니다.

HTML :

<tbody> 
    <tr ng-repeat="row in rows" create-table> 
    <td nowrap ng-repeat="value in row | reduceString>{{value}}</td> 
    </tr> 
</tbody> 

지침 : 나는 각 반복에 대한 새로운 <tr> 요소를 추가 할 수 있지만 그것이에 추가 된 후

app.directive('createTable', function() { 
     return { 

      link: function (scope, element, attrs) { 
       var contentTr = scope.$eval('"<tr ng-show=&quot;false&quot;><td>test</td></tr>"'); 
       $(contentTr).insertBefore(element); 
      } 
     } 
    } 
); 

, 나는 실행 된 각 코드를 얻을 수 아니에요 DOM (예 : <tr> 내부의 ng-show). 나는 명백한 것을 놓치고 있는가?

Answer 1

너는 compiling이이 부족하기 때문에 너는 너의 아이 안쪽에 구속력을 얻지 않는 이유이다. 링크 함수가 실행되면 요소가 이미 컴파일되어 각도가 증가합니다. 수작업으로 콘텐츠를 $compile (으)로 보내십시오. 먼저 템플릿을 평가하지 마십시오. 그러면 바인딩 팁이 없어집니다.

app.directive('createTable', function ($compile) { 
    return { 
    link: function (scope, element, attrs) { 
     var contentTr = angular.element('<tr ng-show=&quot;false&quot;><td>test</td></tr>'); 
     contentTr.insertBefore(element); 
     $compile(contentTr)(scope); 
    } 
    } 
}); 

또 다른 팁 : 당신이 jQuery를 ($)에 요소를 동봉하지 않습니다. 페이지에 jQuery가 있으면 모든 Angular 요소가 이미 jQuery 확장 요소입니다.

마지막으로, 필요한 사항을 해결하는 올바른 방법은 컴파일하기 전에 요소 compile ('Compilation process, and directive matching' and 'Compile function' 읽기) 기능을 사용하는 것입니다.

마지막으로 노력한 결과 Directive guide 전체를 읽으십시오.이 자료는 귀중한 자료입니다.