Active link/tab in AngularUI Router

Question

I'm using AngularUI Router and I'm trying to have nested/children links.

All works fine but how do I have selected/active link in Contact tab?

Basically, I need to be able to have selected/active contact one link when the Contact page is loaded. Currently it does not read for some reason the controlleroneCtrl unless I click on the link contact one.

angular
    .module ('myApp', ['ui.router'
  ])
    .config (['$urlRouterProvider', '$stateProvider',  function ($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise ('/summary');

        $stateProvider.
            state ('summary', {
            url: '/summary',
            templateUrl: 'summary.html',
            controller: 'summaryCtrl'
          }).
            state ('about', {
            url: '/about',
            templateUrl: 'about.html',
            controller: 'aboutCtrl'
          }).
            state ('contact', {
            url: '/contact',
            templateUrl: 'contact.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.one',{
            url: '/contact.contactone',
            templateUrl: 'one.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.two',{
            url: '/contact.contacttwo',
            templateUrl: 'two.html',
            controller: 'contacttwoCtrl'
          });

      }]);

Plunker: http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview

Solution 1

There's a much quicker way to do this. Just use the ui-sref-active="active" attribute instead of ui-sref.

An example:

<ul>
    <li ui-sref-active="active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

When the state is active the list item gets the class active. If you want a different class for active states or more than one class, just add it as follows

<ul>
    <li ui-sref-active="active so-active super-active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

Solution 2

I use the pattern of exposing state on the root scope and using state.current.name in templates. I justify this global exposure because it's an app-level concern. If your navigation directive has isolate scope you'll need to pass it in, but that's no biggie.

In practice it's been very good for us I think.

Looks like this:

javascript

app = angular.module ('myApp', ['ui.router']);
app.controller('MainController', function($scope, $state){
  $scope.state = $state;
});

html:

<nav>
  <ul>
    <li ng-repeat="tab in tabs" ng-class="{active: state.current.name === tab.id}>{{tab.name}}</li>
  </ul>
</nav>

Solution 3

here is the updated plunk - http://plnkr.co/edit/UjjNm4JJIsjb4ydWZRDi?p=preview

Changes

1. added a new controller contactCtrl

2. setup $state.go('contact.contactone'); inside the contactCtrl

3. updated app.js so that /contact points to contactCtrl

Solution 4

I'm using ng-class like this:

ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"

My "state" name is structured like:

app
app.homepage
app.profile
app.profile.user
.etc

For example, in my homepage, it's button became like this:

<li ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"><a ui-sref="app.homepage">Home</a></li>

So just define scope of $state like @Simple As Could Be said at root of the app controllers, and you can use ng-class to whatever your app's state and how deep your app's state nested.

View more solutions