AngularJs使用SubMenu创建上下文菜单

Question

我想用angularjs在指令中创建一个上下文菜单,我可以创建一个菜单但不能用子菜单创建.我的意思是,在悬停时打开子菜单.

示例小提琴:示例上下文菜单

我的控制器:

$scope.menuOptions = [
        ['New User', function () {
           console.log("New User");
        }],
        ['Delete', function () {
           console.log("Delete");
        }]
    ]; 

这个小提琴是非常好的,只有我想在这个上下文菜单中添加子菜单.如何根据此示例创建子菜单？

Answer 1

你在这里遇到的第一个问题是,你正在使用Bootstrap和Bootstrap不支持Submenus(不再)开箱即用.但您可以通过添加一些样式表来扩展功能.第二个问题是你需要扩展renderContextMenu函数以支持嵌套数组,目前它只支持简单数组.

这是我尝试解决您的问题:JSFIDDLE

仍然有点hacky但会工作.这是我改变的:

• 更改了menuOptions,添加了一个新的示例Item,它没有第二个位置的函数,而是另一个项目数组
• 提取了angular.forEach...通过项目处理新方法的方法的功能,buildMenuItem因为我需要它来重用来处理子项目
• 更新了例程,else if(item[1] instanceof Array)检查子菜单,这是添加子菜单的地方,使用递归添加子菜单项(你基本上可以有多个级别,而不只是一个)
• 从上面的链接添加了样式表以支持子菜单样式