Question

我正在以角度构建树视图。

应该看起来像这样：

http://plnkr.co/edit/Od7QTq2bGMeZr4vWg23T?p=preview

很好，很漂亮。

但是，当我从：

更改嵌套列表时

    <script type="text/ng-template"  id="tree_item_renderer.html" class="tree">





  <ul>
   <li>
      <div class="person">
         Simon
         <p></p>
      </div>
      <ul>
         <li>
            <div class="person">
               Walter
            </div>
            <ul>
               <li>
                  <div class="person">
                     Charles
                  </div>
               </li>
               <li>
                  <div class="person">
                     Dick
                  </div>
               </li>
               <li>
                  <div class="person">
                     Sarah
                  </div>
               </li>
            </ul>
         </li>
         <li>
            <div class="person">
               Edwin
            </div>
            <ul>
               <li>
                  <div class="person">
                     Edwin
                  </div>
               </li>
               <li>
                  <div class="person">
                     Edwin
                  </div>
                  <ul>
                     <li>
                        <div class="person">
                           Edwin
                        </div>
                     </li>
                     <li>
                        <div class="person">
                           Edwin
                        </div>
                     </li>
                     <li>
                        <div class="person">
                           Edwin
                        </div>
                     </li>
                  </ul>
               </li>
               <li>
                  <div class="person">
                     Edwin
                  </div>
               </li>
            </ul>
         </li>
         <li>
            <div class="person">
               Hap
            </div>
         </li>
      </ul>
   </li>
</ul>

    </script>


    <div ng-controller="TreeController" >
      <div ng-repeat="data in tree" ng-include="'tree_item_renderer.html'" class="tree"></div>
  </div>

对于我认为接近我需要的嵌套模板，我的模板很奇怪。

这是我写的。链接到Plunker： http://plnkr.co/edit/TQLYtAwDGmdK9EC5DVk9?p=preview Plunker

   <script type="text/ng-template"  id="tree_item_renderer.html" >




      <ul>
            <li>
                <div class="person">
            Simon
            <p></p>
          </div>
           <!-- Not supposed to be a div!? -->
          <div ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></div>
            </li>
      </ul>
    </script>

看起来我的tree_item_render.html被插入为div。弄清楚列表结构。如何删除该div以恢复我的树？ :) 感谢。

Answer 1

首页这些帮助我将您的代码更改为此，这是plnkr网址 Example

<script type="text/ng-template"  id="tree_item_renderer.html" >
    <ul>
        <li>
            <div class="person">
        {{data.name}}
        <button ng-click="add(data)">Add Child</button>
          <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete Ancestors</button>
        <p></p>
      </div>
      <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'" class="tree">
      <ui>
    </li>
  </ul>

</script>


<div ng-controller="TreeController" class="tree">
  <div ng-repeat="data in tree" ng-include="'tree_item_renderer.html'" class="tree"></div>
</div>

Answer 2

您是否尝试使用官方文档中显示的此指令的元素形式？

<ng-include
    src="string"
    [onload="string"]
    [autoscroll="string"]>
    ...
</ng-include>

在Angular 1中嵌套模板以进行树视图

2 个答案: