我正在尝试使用AngularJS创建一个树视图.
这是我的代码：
module.directive('treeview',function () {
return {
restrict: 'E',templateUrl: "/templates/ui/controls/treeview.htm",replace: true,transclude: true,scope: {},link: function (scope,element,attrs) {
console.log("treeview directive loaded");
},controller: function ($scope,$rootScope) {
$rootScope.depth = 0;
$scope.items = [
{ text: "face" },{ text: "palm" },{
text: "cake",childitems: [
{ text: "1 face" },{ text: "1 palm" },{ text: "1 cake" }
]
}
];
}
};
});
module.directive('treeviewItem',templateUrl: "/templates/ui/controls/treeview-item.htm",scope: {
item: "="
},attrs) {
console.log("treeview item directive loaded");
}
};
});
树视图模板：
<div class="sl-treeview">
<ul class="clear" ng-transclude>
<treeview-item ng-repeat="item in items" item="item"></treeview-item>
</ul>
</div>
Treeview项目模板：
<li>
<i class="icon-plus-sign"></i>
<a href="/">
<i class="icon-folder-close"></i>
{{item.text}}
</a>
<!-- This ul is the issue - it crashes the page -->
<ul>
<treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item>
</ul>
</li>
在treeview指令$scope.items是硬编码的开发 – 最终我希望这将来自一个控制器/服务从服务器拉取数据.然而,它代表了我正在寻找的基本结构.
当我运行这个没有嵌套的ul在treeviewItem它给我的前三个项目就好了.当我添加ul来尝试和控制绑定与子项目,它交给页面并停止工作.
JSFiddle没有嵌套的ul工作：
JSFiddle嵌套ul – 不工作(可能会挂起你的浏览器！)：
问题是你试图递归地定义你的指令,当角度试图编译模板时,它看到了treeview指令,它被称为treeview的编译函数,然后看到treeviewItem指令,它叫做treeviewItem的编译函数,它称为treeviewItem的编译函数,它叫做treeviewItem的编译函数…
看到问题？对编译功能的调用无法停止.所以,你需要从你的模板中拉出递归定义,但是使用$compile手动构建DOM：
module.directive('treeviewItem',function ($compile) {
return {
restrict: 'E',template: '<li><i class="icon-plus-sign"></i><a href="/"><i class="icon-folder-close"></i>{{item.text}}</a></li>',attrs) {
element.append($compile('<ul><treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item></ul>')(scope));
console.log("treeview item directive loaded");
}
};
});
或者,我找到了一个在SO https://stackoverflow.com/a/11861030/69172上显示树状数据的解决方案.然而解决方案使用ngInclude而不是指令.
