0

我正在尝试动态构建 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 模板代码：

<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 (child) ng-template 使用了来自 ng-repeat="element.columns" 中的根 item.columns。

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

Ng-模板嵌套

任何建议如何解决此问题。

4

1 回答 1

0

我已经设法解决了这个问题，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 -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

于 2017-01-14T11:29:25.113 回答