我有一个这样的模板:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="opencubesDashboardApp">
<div class="ui inverted fixed transparent main menu" >
MENU
</div>
<ng-view>
</ng-view>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/semantic-ui/0.18.0/javascript/semantic.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/0.18.0/css/semantic.min.css">
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
...
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
...
<script src="scripts/controllers/mod.js"></script>
<!-- endbuild -->
</body>
</html>
问题是主菜单可以根据 View 改变或不改变。示例:
/mod/:slug路由包含选项卡概述(已选择)、统计、编辑常规、< kbd>编辑正文和操作/mod/:slug/stats路由包含选项卡概述、统计(选定)、编辑常规 ，编辑正文和操作/mod/:slug/edit/general路由包含选项卡概述、统计、编辑常规 (选择)，编辑正文和操作- ...
/user路由包含标签概述(已选择)、统计、编辑个人资料和操作- ...
是否有一种干净的方法可以轻松管理此问题？
最佳答案
您可以在根范围(或接近根范围)中创建一个函数，该函数接收表示菜单项的数组 [{title: '', href: ''}] 并从传递到所需菜单的每个路由的 Controller 执行它内容。
在 ui-router 中，您可以通过每个路由的 resolve 属性来完成此操作。例如，创建一个工厂，将所有可能的菜单状态拉入其中并在解析中调用它。
或者您可以根据当前状态名称显示/隐藏菜单元素。
其实有很多方法。
关于javascript - 如何在angularjs中制作动态侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24384206/