How do I apply active class to navbar using angular-ui-utils?

Question

I am a rank beginner with angularJS and I'm developing the ui for a single-page app in angularJS using node/bower/grunt and I have installed angular-ui-bootstrap and the route and event utils from angular-ui-utils.
I've used ng-class={active:$uiRoute} on the menu items but when a menu item is selected the active class is not applied...does $uiRoute handle this or do I need to code it separately?

Apologies for asking a dumb question...
Here is the code:

`<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li ui-route="/" ng-class="{active:$uiRoute}"><a href="#/">Home</a></li>
    <li ui-route="/about" ng-class="{active:$uiRoute}"><a href="#/about">About</a></li>
    <li ui-route="/other" ng-class="{active:$uiRoute}"><a href="#/other">Other</a></li>
  </ul>
</div>
...
<script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
<script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`

And

angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
  })
  .when('/other', {
    templateUrl: 'views/other.html',
    controller: 'OtherCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
})

You need to add ui.utils' in angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])` — A.B.Cade
– A.B.Cade, Commented May 25, 2014 at 4:20

scniro · Accepted Answer · 2015-04-21 23:52:01Z

2

Looking through the ui-utils docs, it appears you have not injected the module dependency. Change your myApp to inject ui.utils

angular.module('myApp', [
    'ngRoute',
    'ngResource',
    'ui.bootstrap',
    'ui.utils'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
  })
  .when('/other', {
    templateUrl: 'views/other.html',
    controller: 'OtherCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
});

answered Apr 21, 2015 at 23:52

scniro

17k8 gold badges67 silver badges108 bronze badges

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

Comments

oldtechaa · Accepted Answer · 2016-07-02 12:47:30Z

0

add ng-class="{'active':isActive('/about')}"

.run([ '$rootScope', '$location', function($rootScope, $location, ) {
    $rootScope.isActive = function(path) {
         if ($location.path() && $location.path().substring(0, path.length) == path) {
            return true;
         }
         return false;
    }
}

edited Jul 2, 2016 at 12:47

oldtechaa

1,5301 gold badge15 silver badges29 bronze badges

answered Jul 2, 2016 at 11:35

Abhishek Kumar

113 bronze badges

Comments

Xavier Haniquaut · Accepted Answer · 2017-05-18 09:15:30Z

I advise you tu use UI router with named states.

Your router will looks like :

angular
  .module('myApp', ['ui.router'])
  .config(($stateProvider, urlRouterProvider) => {
    $stateProvider
      .state('index', {
        url: '/',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
      })
      .state('index.about', {
        url: 'about/'
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      });
    $urlRouterProvider.otherwise('/');
  });

and you will be able to user ui-sref-active directive in your template like :

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li ui-sref-active="{ 'active': 'index' }">
      <a href="" ui-sref="index">Home</a>
    </li>
    <li ui-sref-active="{ 'active': 'index.about' }">
      <a href="" ui-sref="index.about">About</a>
    </li>
  </ul>
</div>

Collectives™ on Stack Overflow

How do I apply active class to navbar using angular-ui-utils?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related