Question

假设我们有这样的树结构：

/
- 图像/
  - foo.jpg
  - bar.jpg
  - day.jpg
- VIDS /
  - 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>

请注意，当您单击树中的节点时，我想记录子节点及其父节点：

$scope.logNodeAndParent = function(node, parent) {
    console.log('Child: ' + node.title + ' Parent: ' + parent.title);        
};

问题是，如何访问当前孩子的父母？

http://jsfiddle.net/benfosterdev/NP7P5/2/

Answer 1

如果您使用ng-init设置初始父级tree，那么在模板中，将父级属性更新为$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>

这是一个更新的小提琴：http://jsfiddle.net/NP7P5/5/

Answer 2

使用$ parent。$ parent.child而不是parent。

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

检查这个plunkr：

http://jsfiddle.net/L6Vqn/6/

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

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

2 个答案: