Javascript 向ngRepeat注入变量

我有一个递归ng repeat，用于创建一个分支思维导图树，它可能无限期地包含子节点（运行下面的代码片段以更好地理解我的意思）

我的

$scope

中有一个

remove（）

函数，它打算删除自身。但是，要执行此操作，我需要访问父级。我试图通过使用ng init在名为

parent

的变量中设置父节点来实现这一点。问题是，

parent

变量似乎引用的是节点本身，而不是其父节点。如何将父对象注入到循环中

除了前面提到的

$scope.remove（）

以外的所有内容都可以在下面的代码段中使用：

（函数（）{
有棱角的
.module（'createTree'，[]）
.controller（'CreateTreeController'，函数（$scope）{
$scope.tree=[{
标题：“节点1”，
子节点：[
{
标题：“节点1.1”，
子节点：[]
},
{
标题：“节点1.2”，
子节点：[
{
标题：“节点1.2.1”，
子节点：[]
},
{
标题：“节点1.2.2”，
子节点：[]
}
]
},
{
标题：“节点1.3”，
子节点：[]
}
]
}];
$scope.addTo=函数（节点）{
node.subNodes.push({
标题：node.title+“+”（node.subNodes.length+1），
子节点：[]
});
}
$scope.remove=函数（节点，父节点）{
变量索引=父级.subNodes.indexOf（节点）
如果（索引>-1）父子节点拼接（索引，1）；
}
});
})();
*{
位置：相对位置；
框大小：边框框；
}
.节点{
填充：1px0；
}
.node>子节点{
左边距：10px；
}
.node>子节点：：之前{
内容：''；
显示：块；
宽度：5px；
高度：1px；
背景色：黑色；
位置：绝对位置；
最高：50%；
左：-10px；
}
.node>子节点：：之后{
内容：''；
显示：块；
宽度：1px；
身高：100%；
背景色：黑色；
位置：绝对位置；
排名：0；
左：-5px；
z指数：1；
}
.node>.subNodes>.node:：before{
内容：''；
显示：块；
宽度：5px；
高度：1px；
背景色：黑色；
位置：绝对位置；
最高：50%；
左：-5px；
z指数：3；
}
.node>.subNodes>.node:第一个子节点：：之后{
内容：''；
显示：块；
宽度：1px；
身高：50%；
背景色：白色；
位置：绝对位置；
排名：0；
左：-5px；
z指数：2；
}
.node>.subNodes>.node:最后一个子节点：非（：第一个子节点）：：之后{
内容：''；
显示：块；
宽度：1px；
高度：计算（50%-1px）；
背景色：白色；
位置：绝对位置；
底部：0；
左：-5px；
z指数：2；
}
.node>.subNodes>.node:唯一的子节点：：之后{
身高：100%；
}
.node>*{
显示：内联块；
垂直对齐：中间对齐；
}
.node[类型=文本]{
宽度：100px；
}

，父：{{parent.title}
在每个循环中更新父循环的方式都有问题。基本上，在第一级之后，父级的值与节点的值变得相同。这实际上是一个角度特性，其中再次调用ng init来更新parent的值，因为它看到node的值在ng repeat中发生了更改。因此，最终结果是父节点的值始终是node.subNodes中的最后一个元素。因此，当您调用remove时，并没有真正传递节点的父节点。为了克服这个问题，我添加了第三个变量，它将保存父级（或者更确切地说是下一个父级）的值。我创造了一个小提琴手。

我只对您的HTML进行了如下更改（ng init表达式已更改）：


，父：{{parent.title}
父节点不能是节点，您需要为每个节点设置真正的父节点

我提出了一个解决办法


（函数（）{
有棱角的
.module（'createTree'，[]）
.controller（'CreateTreeController'，函数（$scope）{
$scope.tree=[{
标题：“节点1”，
父项：null，
子节点：[]
}];
$scope.addTo=函数（节点）{
node.subNodes.push({
标题：node.title+“+”（node.subNodes.length+1），
父节点：，
子节点：[]
});
}
$scope.remove=函数（节点，父节点）{
var index=node.parent.subNodes.indexOf（node）
如果（索引>-1&&node.parent！=null）node.parent.subNodes.splice（索引，1）；
}
});
})();
*{
位置：相对位置；
框大小：边框框；
}
.节点{
填充：1px0；
}
.node>子节点{
左边距：10px；
}
.node>子节点：：之前{
内容：''；
显示：块；
宽度：5px；
高度：1px；
背景色：黑色；
位置：绝对位置；
最高：50%；
左：-10px；
}
.node>子节点：：之后{
内容：''；
显示：块；
宽度：1px；
身高：100%；
背景色：黑色；
位置：绝对位置；
排名：0；
左：-5px；
z指数：1；
}
.node>.subNodes>.node:：before{
内容：''；
显示：块；
宽度：5px；
高度：1px；
背景色：黑色；
位置：绝对位置；
最高：50%；
左：-5px；
z指数：3；
}
.node>.subNodes>.node:第一个子节点：：之后{
内容：''；
显示：块；
宽度：1px；
身高：50%；
背景色：白色；
位置：绝对位置；
排名：0；
左：-5px；
z指数：2；
}
.node>.subNodes>.node:最后一个子节点：非（：第一个子节点）：：之后{
内容：''；
显示：块；
宽度：1px；
高度：计算（50%-1px）；
背景色：白色；
位置：绝对位置；
底部：0；
左：-5px；
z指数：2；
}
.node>.subNodes>.node:唯一的子节点：：之后{
身高：100%；
}
.node>*{
显示：内联块；
垂直对齐：中间对齐；
}
.node[类型=文本]{
宽度：100px；
}

，父：{{node.parent.title}
作用域中只有一个
父变量。因此，您在每个循环中都会覆盖它。@SimonSchüpbach我希望变量对循环是私有的-我如何实现这一点？即使如此，为什么打印
parent.title
会打印节点本身的标题而不是它的父节点？
nginit
是在{{}语法中的东西之前执行的吗？因为这解决了问题，所以我接受了@PratikBhattacharya的答案b
<div ng-controller="CreateTreeController">
  <script type="text/ng-template" id="treeNode.html">
    <span>
            <input
                type="button"
                value="x"
                ng-click="remove(node,parent)"
            >
            <a href="#">{{node.title}}</a>, parent: {{parent.title}}
            <input 
                type="button" 
                value="+" 
                ng-click="addTo(node)"
            >
        </span>
    <div class="subNodes" ng-show="node.subNodes.length>0">
      <div class="node" ng-init="parent=oldParent;oldParent=node;" ng-repeat="node in node.subNodes" ng-include="'treeNode.html'"></div>
    </div>
  </script>

  <div class="node" ng-init="parent=tree;oldParent=parent[0];" ng-repeat="node in tree" ng-include="'treeNode.html'"></div>
</div>