Angularjs 菜单和单击时的不同子菜单

我试图建立一个菜单和一个子菜单的角度。 我想做的是有两个对象数组 菜单

因此，当我单击

Name1

时，将选择

子菜单的第一个数组，当单击
Name2
时，将选择第二个数组。
如何创建两个指令，一个用于主菜单，另一个用于第二个菜单，并能够在单击时在它们之间进行通信。我曾尝试在控制器中构建此功能，我可以使用
$index
选择子菜单，但子菜单不能随意移动，因为它需要在控制器下

我终于解决了我的问题这里是解决方案：

如何改进我的解决方案？
无法给出确切答案，因为缺少信息，但例如，如果您在应用程序的其他位置使用具有不同菜单项的指令，我建议将控制器（ng控制器，而不是指令的控制器）的菜单数组传递到指令的作用域

另外，您正在寻找指令直接通信的标准方式（在您的情况下，菜单和子菜单指令之间的通信用于通知项目选择更改），使用指令的控制器。这里有一个很好的教程

不要重新发明轮子：）UI路由器是一种预打包的解决方案，可为您处理嵌套路由

如果您有一个项目菜单，并且您希望在选择其中一个项目时显示另一个项目菜单，UI router正是这样做的
 要在控制器或指令之间通信，应使用服务

从角度引导（）：

Angular服务是使用依赖项注入（DI）连接在一起的可替换对象。您可以使用服务在应用程序中组织和共享代码

我检查了您发布在jsfiddle（）上的代码，并试图保留大部分代码。下面是我在JavaScript文件中的更改（请阅读代码中的注释）

希望有帮助
 尝试以下代码：

function MyCtrl ($scope) {
        $scope.subMenu = [];    // default is false

    $scope.toggleSubMenu = function (index) {
        $scope.subMenu[index] = !$scope.subMenu[index];
    };
}

HTML

<ul>
    <li ng-class="{active: subMenu[0]}"> <a href="#hello" ng-click="toggleSubMenu(0)">Name1</a>
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </li>
    <li ng-class="{active: subMenu[1]}"> <a href="#foo" ng-click="toggleSubMenu(1)">Name2</a>
        <ul>
            <li>bar</li>
            <li>bar</li>
            <li>bar</li>
        </ul>
    </li>

</ul>




试验
试验
试验




酒吧
酒吧
酒吧




也检查

<div ng-app="app">
    <div ng-controller="main">
        <menu></menu>
        <h1>Hello World!</h1>
        <div class="main-content">
            <submenu></submenu>
        </div>
    </div>
</div>

function MyCtrl ($scope) {
        $scope.subMenu = [];    // default is false

    $scope.toggleSubMenu = function (index) {
        $scope.subMenu[index] = !$scope.subMenu[index];
    };
}

<ul>
    <li ng-class="{active: subMenu[0]}"> <a href="#hello" ng-click="toggleSubMenu(0)">Name1</a>
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </li>
    <li ng-class="{active: subMenu[1]}"> <a href="#foo" ng-click="toggleSubMenu(1)">Name2</a>
        <ul>
            <li>bar</li>
            <li>bar</li>
            <li>bar</li>
        </ul>
    </li>

</ul>