Javascript 使用列表动态构建ng模板

我试图动态构建ng模板，在数据结构中，我有一个对象，其中包含相同类型或其他类型对象的列表

[
                      {
                            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模板代码：

<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>

和{item.id}

在ng模板代码中，可以很容易地添加第一级或不同类型的对象，但是在第二级添加相同类型的对象时无法正常工作，这似乎是一个递归循环。 这是因为嵌套的ng模板（子）ng模板使用ng repeat=“item.columns中的元素”中的根item.columns

---

任何关于如何解决此问题的建议。

我已设法解决此问题，但重复创建一个新的子作用域，但是父作用域中的项在子作用域中也可见，由于这是递归的，这意味着子模板和父模板都具有名为项的同名变量。但是，忽略子范围变量项：

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

在上面的代码片段中，元素还有一个名为item的变量，因此在调用item.columns时，在子范围中再次调用父元素的item变量，以确保不忽略子元素的item变量，我们需要将ng init与ng include一起使用，并在子范围中将当前元素设置为项，如下所示：

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

欲了解更多信息，请访问

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