使用列表動態構建ng-template

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）模板使用了來自item.columns中的ng-repeat =“ element”的根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變量，以確保不忽略child的item變量，我們需要使用ng使用ng-include -init並將當前元素設置為子作用域中的item ，如下所示：

           <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