동적으로 목록을 사용하여 ng-template 빌드

Question

동적으로 ng-template을 만들려고합니다. 데이터 구조에서 동일한 유형의 객체 또는 다른 유형의 객체 목록을 포함하는 객체가 있습니다.

[ 
         { 
          type: "device", 
          id: 1, 
          allowedTypes: ["device","action"], 
          max: 5, 
          columns: [ 

           { 
            type: "action", 
            id: "1" 
           }, 
           { 
             type: "device", 
             id: 2, 
             allowedTypes: ["device","action"], 
             max: 5, 
             columns: [ 

              { 
               type: "action", 
               id: "1" 
              }, 
              { 
               type: "action", 
               id: "2" 
              } 

             ] 
            } 

          ] 
         } 
] 

내 NG-템플릿 코드 : 추가 할 때 첫 번째 수준 또는 다른 유형의 개체를 쉽게 추가 할 수있는 NG-템플릿 코드에서

<script type="text/ng-template" id="and.html"> 
     <div class="container-element box box-red"> 
      <h3>And {{item.id}}</h3> 

      <ul dnd-list="item.columns" 
       dnd-allowed-types="item.allowedTypes" 
        dnd-disable-if="item.columns.length >= item.max"> 


       <li ng-repeat="element in item.columns" 
        dnd-draggable="element" 
        dnd-effect-allowed="move" 
        dnd-moved="item.columns.splice($index, 1)" 
        dnd-selected="models.selected = element" 
        ng-class="{selected: models.selected === element}" 
        ng-include="element.type + '.html'" onload="onloadAction()"> 
       </li> 
      </ul> 

      <div class="clearfix"></div> 
     </div> 
    </script> 

는, 객체의 그러나 동일한 유형이 제대로 작동하지 않습니다 2 단계에서는 재귀 루프로 진행됩니다. 중첩 된 ng-template (하위) ng-template은 ng-repeat = "item.columns의 요소"에서 root item.columns를 사용하기 때문입니다.

   <li ng-repeat="element in item.columns" 
        dnd-draggable="element" 
        ng-include="element.type + '.html'"> 
       </li> 

는이 문제를 해결하는 방법을 조언한다.

Answer 1

이 문제를 해결하기 위해 ng-repeat가 새로운 하위 범위를 만들지 만, 부모 범위의 항목도 자식 범위에서 볼 수 있습니다. 이는 자식 템플릿과 부모 템플릿 두 변수 모두 항목이라는 동일한 이름의 변수가 있습니다. 그러나 변수 항목이 무시됩니다 자식 범위 :

  <li ng-repeat="element in item.columns" 
       dnd-draggable="element" 
       ng-include="element.type + '.html'"> 
      </li> 

우리가 item.columns를 호출 할 때 자식 범위에 있도록 요소 또한, 항목이라는 변수를 가지고 위의 코드에서 부모의 항목 변수가 아래 그림과 같이 아이의 항목 변수가 무시되지 않도록 다시 호출, 우리는 NG-포함하여 NG-초기화를 사용하고 자식 범위 항목로 현재 요소를 설정해야합니다

  <li ng-repeat="element in item.columns" 
       dnd-draggable="element" 
       ng-include="element.type + '.html'" ng-init="item=element"> 
      </li> 

자세한 내용은 http://benfoster.io/blog/angularjs-recursive-templates

을 참조하십시오.