javascript - 将变量注入(inject) ngRepeat

Question

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

我的 $scope 中有一个 remove() 函数，它打算删除自身。但是，为此，我需要访问父级。我尝试通过使用 ng-init 在名为 parent 的变量中设置父节点来实现这一点。问题是，parent 变量似乎指的是节点本身而不是其父节点。我该如何将父代注入(inject)循环？

除前面提到的 $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>

Answer 1

您在每个循环中更新父项的方式存在问题。基本上发生的事情是，在第一级之后，您的 parent 的值(value)变得与节点的值(value)相同。这实际上是一个 Angular 特征，其中 ng-init 被再次调用以更新 parent 的值，因为它看到 node 的值在 ng-repeat 中发生了变化。所以最终结果是 parent 的值将始终是 node.subNodes 中的最后一个元素。因此，当您调用 remove 时，节点的父节点并没有真正被传递。为了克服这个问题，我添加了第三个变量，它将保存父级(或者更确切地说是下一个父级)的值。我创建了一个 fiddle 手 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>