带UI引导的AngularJs递归指令

我正在尝试编写一个AngularJs指令，它将递归地将UI引导程序accordion嵌套在一个树状结构中

我一直在尝试应用这里找到的配方： ，特别是

我已经取得了一些成功。。。有几个问题我想不出来

这是我的

有一个明显的问题，我的标题只显示“叶”项目

为了在accordion组中添加子元素，我使用

$element.find（“p”）.replacetwith（childItem）

---

我根据中的另一个例子（是的，应该更深入地挖掘…）让它工作起来

---

这里保留了Plunker，它有一个粗糙但有效的增强功能，将子元素的名称和标题字段与指令中的深层内容分离（请参见“kids”和“childs”$scope变量），因此该指令可用于任何数据集

功能节点（名称、子节点）{
this.name=名称；
this.children=children | |[]；
}
angular.module（'myApp'，['ui.bootstrap']））
.directive（'nodeList'，函数（$compile）{
返回{
限制：'E'，
终端：是的，
范围：{
节点：'=ngModel'，
孩子们：“@”，
headingField:“@”
},
链接：函数（$scope、$element、$attrs）{
if（angular.isArray（$scope.nodes））{
$element.append（“”）；
} 
$compile（$element.contents（））（$scope.$new（））；
}
};
})
.directive（'node'，function（$compile）{
返回{
限制：'E'，
终端：是的，
范围：{
节点：'=ngModel'，
childs:“@”，
headingField:“@”
},
链接：函数（$scope、$element、$attrs）{
if（angular.isArray（$scope.node[$scope.childs]）&&$scope.node[$scope.childs].length>0）{
$element.append（“{{node[headingField]}}”）；
}否则{
$element.append（“{{node[headingField]}}”）；
}
$compile（$element.contents（））（$scope.$new（））；
}
};
})
.controller（'myView'，函数（$scope）{
$scope.data=[
新节点（'组1'[
新节点（'Sub 1.1'[
新节点（'Sub 1.1.1'[
新节点（“子节点1.1.1.1”），
新节点（'Child 1.1.1.2'）），
新节点（'Sub 1.1.2'[
新节点（“子节点1.1.2.1”），
新节点（“子节点1.1.2.2”），
新节点（'Child 1.1.2.3'））]，
新节点（'Sub 1.2'[
新节点（“子节点1.2.1”），
新节点（'Child 1.2.2'）]）]，
新节点（'组2'[
新节点（'Sub 2.1'[
新节点（'Child 2.1.1'））]）]；
});

试验
用于更新版本的UI引导

我还不能发表评论，但我想补充一点，来自@user280767的plunkr适用于他们正在使用的ui.bootstrap版本。对我来说，我必须用文档中列出的新格式uib accordion*替换指令中的accordion*元素。希望这对用户有帮助