使用列表

Question

我正在尝试动态构建ng-template，在Data结构中，我有一个Object，它包含相同类型的对象列表或其他类型的对象。

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

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

在ng-template代码中，可以轻松添加第一级或不同类型的对象，但是当在第二级添加时，相同类型的对象无法正常工作，它似乎是在递归循环中。 这是因为嵌套的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创建了一个新的子范围，但是父范围中的项在子范围内也是可见的，因为这是递归的，意思是孩子模板和父模板都具有名为 item 的同名变量。但是，子范围变量项将被忽略：

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

在上面的代码片段中元素也有一个名为item的变量，所以在我们调用item.columns的子作用域中，再次调用parent的 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>

如需了解更多信息，请访问 http://benfoster.io/blog/angularjs-recursive-templates