Блог

Главная - Вопросы по программированию - как создать динамическую боковую панель в angularjs

как создать динамическую боковую панель в angularjs

#javascript #angularjs

#javascript #angularjs

Вопрос:

У меня есть такой шаблон:

 <!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 маршрут содержит вкладки Overview(выбранные), Stats, Edit general, Edit bodyи Actions
  • /mod/:slug/stats маршрут содержит вкладки Overview, Stats(выбранные), Edit general, Edit bodyи Actions
  • /mod/:slug/edit/general маршрут содержит вкладки Overview, Stats, Edit general(выбранные) Edit body и Actions
  • …
  • /user маршрут содержит вкладки Overview(выбранные), Stats, Edit profileи Actions
  • …

Есть ли простой способ легко управлять этим?

Ответ №1:

Вы можете создать функцию в корневой области (или близко к корню), которая получает массив, представляющий пункты меню [{title: «, href: «}], и выполнить ее из контроллеров каждого маршрута, передавая ему необходимое содержимое меню.

В ui-router вы можете сделать это через resolve свойство каждого маршрута. Например, создайте фабрику, извлеките из нее все возможные состояния меню и вызовите его внутри resolve.

Или вы можете показывать / скрывать элементы меню в соответствии с именем текущего состояния.

На самом деле есть много способов.