javascript - 具有嵌套层次结构的 AngularJS ng-include

Question

我需要创建一个不同于典型嵌套 <ul /> 的水平二叉树结构我看到使用 ng-repeat指示。

我如何使用 ng-include 并将嵌套对象传递给它或以某种方式获取我需要的嵌套对象？

代码如下:

<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-include指令。我想要 $scope对于每个嵌套的 ng-include在 $scope.data 上使用层次结构中的下一级，这将是 leftChildren和 rightChildren .

换句话说我基本上想要相同的效果ng-repeat在 $scope 中调用嵌套数组时有.

希望这一切都有意义:)

Answer 1

这让我在了解情况之前思考了一下。问题与 ng-include 和范围有关。如何将不同的范围“发送”到每个包括。我无法让它与 onload、ng-init、ng-model 等一起工作...所以我想到了 ng-repeat，它创建了一个新的子作用域，这正是我们在这里寻找的。

我创建了一个 Plunker演示在这里。我不得不修改你的数据构建方式，所以我希望你可以应用这些修改。诀窍是为左右 child 创建一个数组，并使用 ng-repeat 创建一个子范围。现在，您甚至可以拥有 2 个以上的分支机构。您还可以添加一个类型属性，以便您知道哪个是左或右等。

结果(link to image):

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>

模板( child )

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