angularjs中的多级导航菜单

Question

我正在编写一个多级动态菜单，它从后端获取菜单数据，并使用UI LI标签构建菜单项。相同的代码如下：

HTML

<ul class="menu">
   <li ng-class="{ active: topController.currentMenuItem === item.Id }" ng-repeat="item in topController.menuItems">
       <a ng-click="topController.currentMenuItem = item.Id">{{::item.Title}}</a>
        <ul class="sec-nav" ng-if="item.SubMenu.length">
            <li ui-sref-active="active" ng-repeat="child in item.SubMenu">
               <a ui-sref="{{::child.State}}">{{::child.Title}}</a>
            </li>
        </ul>
   </li>
</ul>

控制器

vm.menuItems = menuItems.data.Results.target0.menus; 

从后端返回的MenuItem

Fruits       Cars      Country       Hobbies   Weather      Dresses
 - Apple      - BMW     - England               - Autumn
 - Orange     - Audi    - Wales                 - Winter

菜单确实构建并显示没问题，但我遇到的问题是扩展和折叠。当我单击任何父菜单项时，子菜单项会展开，但是当我单击父项或任何其他父项时，菜单不会折叠，它会保持活动状态。

我需要知道，我对上面的代码做了哪些更改，因此当我点击父项时，子菜单项应该被取消激活。

另外，我没有编写指令的经验，所以如何将这段代码转换为指令，以便我可以在我的应用程序的任何地方重复使用此菜单。