ng-repeat 내의 AngularJS 동적 지시문

Question

ng-repeat 안에 동적으로 지시문을 만들려고합니다. 많은 지시자를 만드는 directive-writer을 가지고 있지만 directive-writer은 지시어 속성을 출력하지 않는 것 같습니다. 따라서 두 번째 지시어 집합은 렌더링되지 않습니다.

전체 데모는 this Plunker을 참조하십시오.

<div ng-repeat="dir in directives" directive-writer 
    directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"></div> 

범위 데이터 : 한마디로

나는이 지시 태그가

$scope.directives = [ 
    { directive: 'one', text: 'I am One' }, 
    { directive: 'two', text: 'I am Two' }, 
    { directive: 'three', text: 'I am Three' } 
]; 

지침 정의 :

.directive('directiveWriter', function() { 
    return { 
     restrict: 'A', 
     compile: function(tElement, tAttrs) { 

      tElement.html('<div say="' + tAttrs.directiveText + '" ' 
       + tAttrs.directiveType + '>' + tAttrs.directiveType + '</div>'); 
     } 
    }; 

그리고이 모든 같은 3 개 지침 :

.directive('one', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     template: '<h3 class="one"></h3>', 
     compile: function(tElement, tAttrs) { 
      tElement.text('One says, ' + tAttrs.say); 
     } 
    }; 

문제는

그래서 렌더링 된 HTML은 ... 텍스트 만 같은 속성으로 tAttrs.directiveType 값을 기록하지 않는 directiveWriter입니다 : "세"가 내부 렌더링

<div say="I am One" {{ dir.directive }} class="ng-binding">one</div> 

div는 텍스트로서 문제는 없지만 결코 속성으로 렌더링되지는 않습니다.

이해가 안 :

• 를 텍스트가 "세"를 텍스트로 사업부 내부가 아닌 속성으로 바인딩 할 수 있습니다 이유.
• 클래스가 "ng-binding"으로 설정된 이유는 무엇입니까?

Answer 1

문제 중 하나는 속성이 html로 처리되는 순서입니다. 그들은 이전주기의 범위에서 사용할 수 있습니다 여기에 당신이 그것을 할 수있는 하나 개의 방법 :

HTML :

<div directive-writer directive-text="dir.text" directive-type="dir.directive"></div> 

지침 : 내가 수정

angular.module('app').directive('directiveWriter', function($compile) { 
    return { 
     restrict: 'A', 
     scope:{ 
      directiveType:'=', 
      directiveText:'=' 
     }, 
     link:function(scope,elem, attrs){ 
      var template='<div say="' + scope.directiveText + '" ' + scope.directiveType + '>' + scope.directiveType + '</div>'; 
      template= $compile(template)(scope); 
      elem.replaceWith(template); 
     } 
    }; 
}); 

DEMO

Answer 2

은 너의 본보기. 이제 작동합니다. $ compile을 사용해야합니다.

볼이 정말 대단 아직

(http://plnkr.co/edit/2pUzPClubLLBlfap8fhk?p=preview)