AngularJs 使用 SubMenu 创建上下文菜单答案

【问题标题】：AngularJs Creating Context Menu With SubMenuAngularJs 使用 SubMenu 创建上下文菜单
【发布时间】：2015-04-21 05:59:25
【问题描述】：

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

小提琴样本：sample contextmenu

我的控制者：

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

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

【问题讨论】：

标签： javascript angularjs model-view-controller contextmenu dynamically-generated

【解决方案1】：

您遇到的第一个问题是，您使用的是 Bootstrap，而 Bootstrap 不再支持开箱即用的子菜单。但是you can extend the functionality by adding some style sheets。第二个问题是你需要扩展renderContextMenu函数来支持嵌套数组，目前它只支持简单的数组。

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

仍然有点hacky，但会工作。这是我改变的：

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

【讨论】：

【解决方案2】：

有一个类似的问题，Bootstrap Context Menu，或者你可以使用这个AngularJS Dropdown Multiselect

【讨论】：