Question

我有一个这样的模板：

<!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>

问题是主菜单可以根据视图改变或不改变。例如：

/mod/:slug路由包含标签概述（已选中），统计，编辑常规，编辑正文和行动
/mod/:slug/stats路由包含标签概述，统计（已选中），编辑常规，编辑正文和行动
/mod/:slug/edit/general路由包含标签概述，统计，编辑常规（已选中），编辑正文和行动
...
/user路由包含标签概述（已选中），统计，编辑个人资料和操作
...

有一种干净的方法可以轻松管理吗？

Answer 1

您可以在根范围（或接近根）中创建一个函数，该函数接收表示菜单项[{title：＆＃39;＆＃39;，href：＆＃39;＆＃39;}]的数组，并且从每个路由的控制器执行它，传递给它所需的菜单内容。

在ui-router中，您可以通过每条路线的resolve属性进行操作。例如，创建一个工厂，在其中拉出所有可能的菜单状态，并在解决方案中调用它。

或者您可以根据当前州名显示/隐藏菜单元素。

实际上有很多方法。

如何在angularjs中制作动态侧边栏

1 个答案: