有一些流行的递归角度指令Q&A,它们都归结为以下解决方案之一:
第一个问题是,除非您可以理解地管理手动编译过程,否则无法删除以前编译的代码.第二种方法存在的问题是......不是指令而忽略了它的强大功能,但更迫切的是,它不能像指令一样参数化; 它只是绑定到一个新的控制器实例.
我一直在玩手动做一个angular.bootstrap或@compile()在链接功能,但这让我有手动跟踪要删除和添加的元素的问题.
有一种很好的方法可以使用参数化递归模式来管理添加/删除元素以反映运行时状态吗？也就是说,一个带有添加/删除节点按钮的树和一些输入字段,其值从节点的子节点传递下来.也许是第二种方法与链式范围的组合(但我不知道如何做到这一点)？
我正在尝试使用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', function () {
return {
restrict: …我这里有一个泡菜.我必须通过webservice调用获取我的多级导航菜单.
由于我的导航菜单中可以包含无限量的子菜单,因此我不得不使用递归指令来构建我的父/子导航结构.现在我想弄清楚如何将它变成一个功能性的dropmenu结构.我正在看看angularui-bootstrap,他们有一个Dropdown Toggle,它有一些基本的dropmenu功能,但由于我使用了递归指令,我的菜单结构已经有了angularjs生成的css类附加到它们.angularjs-bootstrap dropmenu有css类,它们与我的angularjs生成的类不同....看哪!
<ul>
<li ng-repeat="parent in parents" class="ng-scope">
<recursive-list-item on-node-click="onNodeClickFn(node)" parent="parent" class="ng-isolate-scope ng-scope">
<a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Clothes</a>
<!-- ngIf: parent.children.length > 0 -->
<ul data-ng-if="parent.children.length > 0" class="ng-scope">
<!-- ngRepeat: child in parent.children -->
<li ng-repeat="child in parent.children" class="ng-scope">
<recursive-list-item data-on-node-click="onNodeClickFn(node)" data-parent="child" class="ng-isolate-scope ng-scope">
<a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Gortex Jackets</a>
<!-- ngIf: parent.children.length > 0 -->
</recursive-list-item>
</li>
<!-- end ngRepeat: child in parent.children -->
...
...
...
</ul>
</recursive-list-item>
</li>
<!-- end ngRepeat: child …javascript angularjs angularjs-directive angularjs-bootstrap
我有一个具有递归关系的数据集的应用程序(树视图,使用递归.)我已经尝试了几种方法通过Angular实现这一点,但似乎没有一种方法可以提供可行的结果.
这里的想法是我希望使用一组嵌套列表渲染这些数据,允许多个(7+)级别的深度.为了简化(我的实际应用程序使用Restangular)我已经构建了以下plunker:
http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij
虽然"顶级"级数据正确呈现(只是第一个标题),但我尝试使用嵌套控制器进行递归似乎失败了.这里的想法是树中的每个"子"都使用它自己的控制器进行渲染,然后控制器可以渲染它的子节点,等等.我意识到嵌套控制器可能不是"最好的"方式,但经过多次搜索后我还没有找到"更好"的选择.
重要的是,最终的解决方案在此处保留了"嵌套"的概念(每个元素出现在其父元素下方,略有缩进.)