angularjs - 单击菜单和不同的子菜单

Question

我正在尝试以 Angular 构建菜单和子菜单。我想要做的是有两个对象数组菜单

menu = [{name: 'Name1', link: '/link1'}, {name: 'Name2', link: '/link2'}]
submenu = [[{name: 'SubName1', link: '/Sublink1'}, {name: 'SubName1', link: '/sublink1'}],
[[{name: 'SubName2', link: '/Sublink2'}, {name: 'SubName2', link: '/sublink2'}]]

因此，当我单击 Name1 时，SubMenu 的第一个数组将被选中，而当我单击 Name2 时，第二个数组将被选中。我如何创建两个指令，一个用于主菜单，一个用于第二个，并能够在单击时在它们之间进行通信。我已经尝试在 Controller 中构建它，我能够使用 $index 选择子菜单，但是子菜单不能随意移动，因为它需要在 Controller 下。

我终于设法解决了我的问题，这里是解决方案:http://jsfiddle.net/4kjjyL4s/4/

如何改进我的解决方案？

Answer 1

不要重新发明轮子 :) UI 路由器是一个预打包的解决方案，可以为您处理嵌套路由。

如果您有一个项目菜单，并且您希望在选择其中一个项目时显示另一个项目菜单，UI 路由器就可以做到这一点。 https://github.com/angular-ui/ui-router