如何在递归指令中访问 parents?
How to access parents in recursive directive?
我正在使用 https://github.com/dotJEM/angular-tree 作为递归指令来遍历这种模型:
$scope.model = [
{
label: 'parent1',
children: [{
label: 'child'
}]
},
{
label: 'parent2',
children: [{
label: 'child',
children: [{
label: 'innerChild'
}]
}]
},
{
label: 'parent3'
}
];
在模板中,代码如下所示:
<div data-dx-start-with="model">
<div data-ng-repeat="node in $dxPrior">
<a class="list-group-item">
<span class="icon" data-ng-click="toggle(node)"><i class=" icon ion-android-arrow-dropdown"></i> </span>
<span>{{ node.label}} ({{node.children.length}})</span>
</a>
<ul data-ng-show="node.expanded" data-dx-connect="node.children"></ul>
</div>
</div>
现在,我将如何访问每个 parent?我希望能够构建树视图的面包屑。
例如: parent2 > child > innerChild > ...
如果我没记错的话,我可以使用 $parent 获取每个节点的 parent...但是我将如何获取每个 parent(s)?
我创建了一个 plnkr 来说明:http://plnkr.co/edit/DOc9k4jT9iysJLFvvg3u?p=preview
只需编程即可。创建将遍历父级直到到达根的函数,并在每一步中构造父级数组:
$scope.getParentsBreadcrumb = function (thisScope) {
var parents = [];
while (thisScope && thisScope.node) {
parents.unshift (thisScope.node.label);
thisScope = thisScope.$parent.$parent;
}
return parents.join(' > ')
}
然后在您要打印面包屑的模板中调用它:
{{getParentsBreadcrumbs (this)}}
我正在使用 https://github.com/dotJEM/angular-tree 作为递归指令来遍历这种模型:
$scope.model = [
{
label: 'parent1',
children: [{
label: 'child'
}]
},
{
label: 'parent2',
children: [{
label: 'child',
children: [{
label: 'innerChild'
}]
}]
},
{
label: 'parent3'
}
];
在模板中,代码如下所示:
<div data-dx-start-with="model">
<div data-ng-repeat="node in $dxPrior">
<a class="list-group-item">
<span class="icon" data-ng-click="toggle(node)"><i class=" icon ion-android-arrow-dropdown"></i> </span>
<span>{{ node.label}} ({{node.children.length}})</span>
</a>
<ul data-ng-show="node.expanded" data-dx-connect="node.children"></ul>
</div>
</div>
现在,我将如何访问每个 parent?我希望能够构建树视图的面包屑。
例如: parent2 > child > innerChild > ...
如果我没记错的话,我可以使用 $parent 获取每个节点的 parent...但是我将如何获取每个 parent(s)?
我创建了一个 plnkr 来说明:http://plnkr.co/edit/DOc9k4jT9iysJLFvvg3u?p=preview
只需编程即可。创建将遍历父级直到到达根的函数,并在每一步中构造父级数组:
$scope.getParentsBreadcrumb = function (thisScope) {
var parents = [];
while (thisScope && thisScope.node) {
parents.unshift (thisScope.node.label);
thisScope = thisScope.$parent.$parent;
}
return parents.join(' > ')
}
然后在您要打印面包屑的模板中调用它:
{{getParentsBreadcrumbs (this)}}