AngularJS NG-包括嵌套层次 [英] AngularJS ng-include with nested hierarchy

问题描述

我有一个要求，以创建水平二叉树的结构，不像典型的嵌套＆LT; UL /＆GT; 我看到使用纳克-repeat 指令。

I have a requirement to create a horizontal binary tree structure that's not like the typical nested <ul /> I see using the ng-repeat directive.

我如何使用NG-包括，要么将它传递嵌套的对象或以某种方式得到我需要的嵌套的对象吗？

How do I use ng-include and either pass it nested objects or somehow get the nested objects that I need?

这里的code：

<div id="tree-container" ng-controller="CommentController">
    <ul class="root-tree" id="current-tree">
        <li class="root node">
            <div class="feed">
                <div class="comment">{{data.comment}}</div>
            </div> 
        </li>
        <li class="root-children">
            <ul class="tree" ng-include="'tree'"></ul>
        </li>
    </ul>
</div>

<script>
    app.controller("CommentController", ["$scope", function ($scope) {
        $scope.data = {
            comments: "blah",
            leftChildren: {
                comments: ["blah", "blah", "blah"],
                leftChildren: { comments: ["blah", "blah", "blah"] },
                rightChildren: { comments: ["blah", "blah", "blah"] }
            },
            rightChildren: { comments: ["blah", "blah", "blah"] }
        };
    )]);
</script>

<script type="text/ng-template" id="tree">
    <li class="node">
        <div class="feed">
            <div class="comment" ng-repeat="comment in data.leftChildren">{{comment.comment}}</div>
        </div>
    </li>
    <li class="node">
        <div class="feed">
            <div class="comment" ng-repeat="comment in data.rightChildren">{{comment.comment}}</div>
        </div> 
    </li>
    <li class="left-children">
        <ul class="tree" ng-include="'tree'"></ul>
    </li>
    <li class="right-children">
        <ul class="tree" ng-include="'tree'"></ul>
    </li>
</script>

您可以在 #tree 模板看到我有2 NG-包括指令。我想 $范围给每个嵌套 NG-包括来使用下一个级别的层次结构 $ scope.data ，这将是 leftChildren 和 rightChildren 。

You can see in the #tree template I have 2 ng-include directives. I would like the $scope for each nested ng-include to use the next level down in the hierarchy on $scope.data, which would be leftChildren and rightChildren.

在换句话说，我基本上要同样的效果 NG-重复要求在 $范围嵌套阵列时，有

In other words I basically want the same effect ng-repeat has when calling nested arrays in the $scope.

希望这一切是有道理的：）

Hopefully this all makes sense :)

推荐答案

这让我了解情况之前想到了一点。该问题与对NG-包括和范围。如何发送不同的范围到每一个包括。我不能使它与onload事件，NG-INIT，NG-模型等工作...所以我想到了NG-重复这将创建一个新的子范围，这就是我们正在寻找在这里。

It made me think a little before understanding the situation. The problem is related to ng-include and the scope. How to "send" a different scope into each includes. I couldn't make it work with the onload, ng-init, ng-model etc... so I thought about ng-repeat which creates a new child scope which is what we are looking for here.

我创建了一个 Plunker 演示在这里。我不得不返工你的数据的构建方式，所以我希望你能应用这些修改。关键是要创造左右的孩子一个数组，并使用NG-重复创建一个子范围。现在，你甚至可以有2个以上分支机构。你还可以添加一个type属性，所以你知道哪个是左或右，等等。

I created a Plunker demo here. I had to rework the way your data is built, so I hope you can apply those modifications. The trick is to create an array for the left and right children and to use ng-repeat to create a child scope. Now, you could even have more than 2 branches. You could also add a type property so you know which is left or right, etc.

结果（链接图片）：

JS （返工数据）

$scope.data = {
  text: "blah",
  comments: [
    {
      text: ["blahL11", "blahL12", "blahL13"],
      comments: [
        { 
          text: ["blahL111", "blahL112", "blahL113"] 
        },
        { 
          text: ["blahR111", "blahR112", "blahR113"] 
        }
      ]
    },
    {
      text: ["blahR11", "blahR12", "blahR13"] 
    }
  ]
};

HTML （根）

<ul>
  <li>{{data.text}}</li>
  <li ng-repeat="item in data.comments" ng-include="'tree.html'"></li>
</ul>

模板（儿童）

<div>Child</div>
<ul>
  <li ng-repeat="text in item.text">{{text}}</li>
  <li ng-repeat="item in item.comments" ng-include="'tree.html'"></li>
</ul>

这篇关于AngularJS NG-包括嵌套层次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！