AngularJs使用子菜单创建上下文菜单

Question

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

样本小提琴： 样本上下文菜单

我的控制器：

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

这个小提琴非常好，只有我要在此上下文菜单中添加子菜单。 如何根据此示例创建子菜单？

Answer 1

您在这里遇到的第一个问题是，您正在使用Bootstrap，而Bootstrap不再支持子菜单。 但是您可以通过添加一些样式表来扩展功能 。 第二个问题是您需要扩展renderContextMenu函数以支持嵌套数组，当前它仅支持简单数组。

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

仍然有点hacky，但可以工作。 这是我更改的内容：

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

Answer 2

还有一个类似的问题， Bootstrap上下文菜单 ，或者您可以使用此AngularJS Dropdown Multiselect