Could not active the menu bar using Angular.js

Question

I am facing an issue. I am unable active the right menu bar using Angular.js. I have some menu,sub-menu and sub-sub-menu but as per requirement I am unable to active those. I am explaining my code below.

route.js:

var Admin=angular.module('easyride',['ui.router','ui.bootstrap']);
Admin.run(function($rootScope, $state) {
    $rootScope.$state = $state;
});
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/',{
        url: '/',
    templateUrl: 'login.html',
        controller: 'loginController'
    })
    .state('dashboard',{
        url:'/dashboard',
        templateUrl:'dashboard.html',
        controller:'dashboardController'
    })
    .state('dashboard.settings',{
        url:'/settings',
        templateUrl:'settings.html',
        controller:'settingsController'
    })
    .state('dashboard.settings.area',{
        url:'/area',
        templateUrl:'area.html',
        controller:'areaController'
    })
    .state('dashboard.settings.area.manageState',{
        url:'/manageState',
        templateUrl:'manageState.html',
        controller:'manageStateController'
    })
    .state('dashboard.settings.area.manageCity',{
        url:'/manageCity',
        templateUrl:'manageCity.html',
        controller:'manageCityController'
    })
})

Here actually when user will get into to the inner page by default the Home table will active. when user will click on settings menu the respective sub-menu Manage Area and sub-sub-menu Manage State tab remain active. I am explaining my page below.

dashboard.html:

<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!--<li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>-->
              <li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
              <li ng-class="{'active open': $state.includes('dashboard.settings.area')}"><a ui-sref="dashboard.settings.area.manageState">Settings</a></li>


            </ul>
          </div>

Here is my full plunkr working code. Here I need when user will click on settings menu the respective sub-menu and sub-sub-menu will remain active and other will inactive which is not happening in my case. Please help.

Chiru Adi · Accepted Answer · 2018-01-23 09:59:23Z

1

Take the example below , How i am activating the sub menu and its menu. I am guessing this may help you.

applying "active" class based on the "stateName" which we get from application controllers from "$state" provider, Based on that i am using ng-class directive to active the menu and its sub-menu.

<li uib-dropdown ng-class="{'active':($root.stateName.indexOf('dashboard.settings')>=0)}">
    <a href uib-dropdown-toggle>Settings <span class="caret"></span></a>
    <ul role="menu" uib-dropdown-menu >
        <li ng-class="{'active':($root.stateName.indexOf('dashboard.settings.area.manageCity')>=0)}">
           <a ui-sref="dashboard.settings.area.manageCity">Manage City</a>
        </li>
        <li ng-class="{'active':($root.stateName.indexOf('dashboard.settings.area.manageState')>=0)}">
            <a ui-sref="dashboard.settings.area.manageState">Manage State</a>
        </li>
        </ul>
</li>

And

In your controller files please use the following code to set the stateName.

module.registerController('TopicController', function ($state, $rootScope) {
      $rootScope.stateName = $state.current.name;//This line in all routes controller.
});

Here is an Plunkr link : edited your code. https://plnkr.co/edit/bFhvod7zf8JgnEAuH6oo?p=preview

You have added the navigation in dashboard page itself so its better you separate the navigation from your actual view. Please check the above Plunkr.

edited Jan 23, 2018 at 9:59

answered Jan 22, 2018 at 13:16

Chiru Adi

6475 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user5443928 Over a year ago

In which file I need to change this. Can you please edit this plunkr ?

user5443928 Over a year ago

Please format your code. Its unreadable. I think you deleted some part.

user5443928 Over a year ago

No, This is not what I wanted. I have structure like this Menu->sub-menu->sub-sub-menu.

Chiru Adi Over a year ago

Then you have to mention the same structure what you want in your question first.

Chiru Adi Over a year ago

Please check the Plunkr link.

|

Collectives™ on Stack Overflow

Could not active the menu bar using Angular.js

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related