Angularjs 중첩 된 지시문을 자바 스크립트로 컴파일하는 방법

Question

중첩 된 계층 구조가있는 중첩 된 지시문이 있습니다.

angular.module("app", []); 
angular.module("app").directive("hero", function() { 
    return { 
    restrict: "E", 
    template: "<div>Hero {{number}}</div> <div ng-transclude></div>", 
    scope: { 
     number: "@" 
    }, 
    transclude: true, 
    link: function (scope) { 

    } 
    } 
}); 

I는 다음과 같이 HTML 파일에서 사용할 수 있습니다 :이 여기 demo 작동

<div ng-app="app"> 
    <hero number="1"> 
     <hero number="2"> 
     <hero number="3"></hero> 
     </hero> 
    </hero> 
</div> 

.

---

지금 동적으로이 작업을 수행하려면, 나의 영웅 모델 항목은 컨트롤러에 있습니다

angular.module("app").controller("mainController", function ($scope) { 
    $scope.heros = [ 
    { number: "1" }, 
    { number: "2" }, 
    { number: "3" }, 
    ] 
}); 

그리고 컨트롤러 모델의 모든 <hero>을 컴파일 새로운 <hero-list> 지침을 만들었습니다.

angular.module("app").directive("heroList", function ($compile) { 
    return { 
    restrict: "E", 
    scope: { 
     data: "=" 
    }, 
    link: function (scope, element) { 
     var temp; 
     angular.forEach(scope.data, function(item){ 
      var tempScope = scope.$new(true); 
      tempScope.model = item; 

      var item = angular.element('<hero model="model"></hero>'); 

      if(temp){ 
       if(temp.children().length){ 
        var k = temp.children().append(item) 
        temp=k; 
       }else 
       temp.append(item);     
      }else{ 
       temp = item; 
      } 
      $compile(item)(tempScope); 

     }); 

     element.append(temp); 
    } 
    } 
}); 

I는 다음과 같이 사용하지만 중첩 된 컴파일되지 않습니다, 그것은 추가 및 기타 하나에 컴파일 :이이 advenced 수준의 문제라고 생각

<div ng-app="app"> 
    <div ng-controller="mainController"> 
    <hero-list data="heros"></hero-list> 
    </div>  
</div> 

작업

(demo-2)

.

Answer 1

두 번째 예에서는 지시문에 숫자 대신 개체를 전달하므로 model: "@" 대신 model: "="을 사용해야합니다. 다음은 작동하는 sample입니다.

Answer 2

ngTransclude으로 처리하는 것은 약간의 어려움이 있습니다.하지만 여기에 대체 방법을 제공 할 수 있습니다. Plnkr 이것이 필요한 경우

div을 중첩 시키려면 수동으로 하위를 찾아서 다른 요소를 추가해야합니다.
HTML

<div ng-controller="mainController"> 
    <hero-list data="heros"> 
    <div ng-class='number'>Hero {{number}}</div> 
    </hero-list> 
</div> 

지침 (JS)는

angular.module("app").directive("heroList", function(){ 
     return { 
     transclude: 'element', 
     link: function(scope, el, attrs, ctrl, transclude) { 

     var heros = scope.$eval(attrs.data); 
     heros.forEach(function(each,idx) { 
     transclude(function(transEl, transScope) { 
      transScope.number = each.number; 
      if(idx===0) 
      { 
      el.parent().append(transEl); 
      } 
      else 
      { 
      el.parent().find("div").append(transEl); 
      } 
     }); 
     }); 
    } 
    } 
});