树视图角1中的嵌套模板

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>

对于我认为接近需要的嵌套模板，我的模板是bizurk。

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

   <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 url 示例

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