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

Question

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

我的控制器：

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

这个fiddle很好，只是我想给这个上下文菜单添加子菜单。如何根据此示例创建子菜单？

Answer 1

有个类似的问题，Bootstrap Context Menu ,alternatively you can use this AngularJS Dropdown Multiselect

Answer 2

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

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

仍然有点老套，但可以用。这是我改变的：

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

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

AngularJs Creating Context Menu With SubMenu

javascript

model-view-controller

contextmenu

dynamically-generated

angularjs