javascript - AngularJs 使用 SubMenu 创建上下文菜单

Question

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

示例 fiddle :sample contextmenu

我的 Controller :

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

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

Answer 1

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

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

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

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