Question

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

我的控制器：

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

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

Answer 1

你在这里遇到的第一个问题是，你正在使用Bootstrap和Bootstrap不支持Submenus（不再）开箱即用。但是you can extend the functionality by adding some style sheets。第二个问题是你需要扩展renderContextMenu函数以支持嵌套数组，目前它只支持简单数组。

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

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

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

Answer 2

有一个类似的问题，Bootstrap Context Menu，您也可以使用此AngularJS Dropdown Multiselect

AngularJs使用SubMenu创建上下文菜单

2 个答案: