Javascript 如何在递归模板中访问父对象

假设我们有这样一个树结构：

• /
  • 图像/
    • foo.jpg
    • bar.jpg
    • day.jpg
  • 视频/
    • foo.mp4
    • bar.mp4
    • day.mp4

以及此结构在JavaScript对象中的表示：

$scope.tree = {
    title: '/',
    children: [{
        title: 'images/',
        children: [{
            title: 'foo.jpg'
        }, {
            title: 'bar.jpg'
        }, {
            title: 'day.jpg'
        }]
    }, {
        title: 'vids/',
        children: [{
            title: 'foo.mp4'
        }, {
            title: 'bar.mp4'
        }, {
            title: 'day.mp4'
        }]
    }]
};

可以通过使用

ng include

递归呈现模板来呈现树：

<script type="text/ng-template" id="tree">
    <a href="#" ng-click="logNodeAndParent(child, parent)">{{ child.title }}</a>
    <ul>
        <li ng-repeat="child in child.children" ng-include="'tree'" ng-init="parent=child">           
        </li>
    </ul>
</script>
<ul>
    <li ng-repeat="child in tree.children" ng-include="'tree'"></li>
</ul>

问题是，如何访问当前子级的父级

---

使用$parent.$parent.child代替parent

<a href="#" ng-click="logNodeAndParent(child, $parent.$parent.child)">{{ child.title }}</a>

请查看以下内容：

---

我认为这是因为ng repeat创建了一个新范围，然后ng include创建了另一个新范围，因此您必须使用$parent两次。

如果您使用

ng init

设置初始父级，

tree

，然后在模板中，将parent属性更新为

$parent.$parent.child

，它应该适用于所有级别

<script type="text/ng-template" id="tree">
    <a href="#" ng-click="logNodeAndParent(child, parent)">{{ child.title }}</a>
    <ul>
        <li ng-repeat="child in child.children" ng-include="'tree'" ng-init="parent = $parent.$parent.child">           
        </li>
    </ul>
</script>
<ul>
    <li ng-repeat="child in tree.children" ng-include="'tree'" ng-init="parent = tree"></li>
</ul>

---

这里有一个更新的fiddle:

虽然这适用于叶节点，但不再适用于它们的父节点（目录）。

<script type="text/ng-template" id="tree">
    <a href="#" ng-click="logNodeAndParent(child, parent)">{{ child.title }}</a>
    <ul>
        <li ng-repeat="child in child.children" ng-include="'tree'" ng-init="parent = $parent.$parent.child">           
        </li>
    </ul>
</script>
<ul>
    <li ng-repeat="child in tree.children" ng-include="'tree'" ng-init="parent = tree"></li>
</ul>