我有一个递归的ng-repeat用于创建一个可能无限期拥有子节点的分支思维导图树（运行下面的代码片段以更好地了解我的意思）。
我的remove()中有一个$scope函数，它打算删除自己。但是，为此，我需要访问父级。我尝试通过使用ng-init在名为parent的变量中设置父节点来实现此目的。问题是，parent变量似乎是指节点本身而不是其父节点。如何将父节点注入循环？
除了前面提到的$scope.remove()之外的所有内容都可以在下面的代码段中使用：
(function(){
angular
.module('createTree',[])
.controller('CreateTreeController', function($scope){
$scope.tree=[{
title:'node 1',
subNodes:[
{
title:'node 1.1',
subNodes:[]
},
{
title:'node 1.2',
subNodes:[
{
title:'node 1.2.1',
subNodes:[]
},
{
title:'node 1.2.2',
subNodes:[]
}
]
},
{
title:'node 1.3',
subNodes:[]
}
]
}];
$scope.addTo=function(node){
node.subNodes.push({
title: node.title+"."+(node.subNodes.length+1),
subNodes:[]
});
}
$scope.remove=function(node,parent){
var index=parent.subNodes.indexOf(node)
if(index>-1) parent.subNodes.splice(index,1);
}
});
})();*{
position: relative;
box-sizing: border-box;
}
.node{
padding: 1px 0;
}
.node>.subNodes{
margin-left: 10px;
}
.node>.subNodes::before{
content: '';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left: -10px;
}
.node>.subNodes::after{
content:'';
display: block;
width: 1px;
height: 100%;
background-color: black;
position: absolute;
top: 0;
left: -5px;
z-index: 1;
}
.node>.subNodes>.node::before{
content:'';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left:-5px;
z-index: 3;
}
.node>.subNodes>.node:first-child::after{
content:'';
display: block;
width: 1px;
height: 50%;
background-color: white;
position: absolute;
top: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:last-child:not(:first-child)::after{
content:'';
display: block;
width: 1px;
height: calc(50% - 1px);
background-color: white;
position: absolute;
bottom: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:only-child::after{
height: 100%;
}
.node>*{
display: inline-block;
vertical-align: middle;
}
.node [type=text]{
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="createTree" ng-controller="CreateTreeController as createTree">
<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=node"
ng-repeat="node in node.subNodes"
ng-include="'treeNode.html'"
></div>
</div>
</script>
<div
class="node"
ng-init="parent=tree"
ng-repeat="node in tree"
ng-include="'treeNode.html'"
></div>
</div>
答案 0 :(得分：3)
在每个循环中更新父级的方式存在问题。基本上发生的事情是，在第一级之后，您父级的值变得与节点的值相同。这实际上是一个角度特征，其中再次调用ng-init来更新父值，因为它看到节点的值在ng-repeat中有变化。因此，最终结果是parent的值将始终是node.subNodes中的最后一个元素。因此，当您调用remove时，该节点的父节点并未真正被传递。为了解决这个问题，我添加了第三个变量，它将保存父项（或者更确切地说是下一个父项）的值。我创造了一个小提琴手here 我只更改了您的HTML，如下所示（ng-init表达式已更改）：
<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>
答案 1 :(得分：2)
父节点不能是节点，您需要为每个节点设置真正的父节点。
我做了一个解决方案
(function(){
angular
.module('createTree',[])
.controller('CreateTreeController', function($scope){
$scope.tree=[{
title:'node 1',
parent: null,
subNodes:[]
}];
$scope.addTo=function(node){
node.subNodes.push({
title: node.title+"."+(node.subNodes.length+1),
parent: node,
subNodes:[]
});
}
$scope.remove=function(node,parent){
var index=node.parent.subNodes.indexOf(node)
if(index>-1 && node.parent != null) node.parent.subNodes.splice(index,1);
}
});
})();*{
position: relative;
box-sizing: border-box;
}
.node{
padding: 1px 0;
}
.node>.subNodes{
margin-left: 10px;
}
.node>.subNodes::before{
content: '';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left: -10px;
}
.node>.subNodes::after{
content:'';
display: block;
width: 1px;
height: 100%;
background-color: black;
position: absolute;
top: 0;
left: -5px;
z-index: 1;
}
.node>.subNodes>.node::before{
content:'';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left:-5px;
z-index: 3;
}
.node>.subNodes>.node:first-child::after{
content:'';
display: block;
width: 1px;
height: 50%;
background-color: white;
position: absolute;
top: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:last-child:not(:first-child)::after{
content:'';
display: block;
width: 1px;
height: calc(50% - 1px);
background-color: white;
position: absolute;
bottom: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:only-child::after{
height: 100%;
}
.node>*{
display: inline-block;
vertical-align: middle;
}
.node [type=text]{
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="createTree" ng-controller="CreateTreeController as createTree">
<script type="text/ng-template" id="treeNode.html">
<span>
<input
type="button"
value="x"
ng-click="remove(node)"
>
<a href="#">{{node.title}}</a>, parent: {{node.parent.title}}
<input
type="button"
value="+"
ng-click="addTo(node)"
>
</span><div class="subNodes" ng-show="node.subNodes.length>0">
<div
class="node"
ng-repeat="node in node.subNodes"
ng-include="'treeNode.html'"
></div>
</div>
</script>
<div
class="node"
ng-repeat="node in tree"
ng-include="'treeNode.html'"
></div>
</div>