CODEWITHSUNDEEP
javascriptangularjs
Vinz243
Vinz243

Reputation: 9938

how to make a dynamic sidebar in angularjs

I have a template like this:

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

The problem is that the main menu can change or not according to the view. Example:

Is there a clean way to manage this easily?

Upvotes: 0

Views: 2336

Answers (1)

gorpacrate
gorpacrate

Reputation: 5571

You can create a function in root scope (or close to root) which receives an array representing menu items [{title: '', href: ''}] and execute it from controllers of each route passing to it needed menu content.

In ui-router you can do it via resolve property of each route. For example create a factory, pull all possible menu states inside it and call it inside resolve.

Or you can show/hide menu elements according to current state name.

There are a lot of ways actually.

Upvotes: 2

Related Questions