ui-sref-active not working correctly with abstract and child states

[blah238]

http://plnkr.co/edit/c7OS1pwI5IjAAs5cEi5s?p=preview

In the example above, clicking the Administration nav element shows a view with two tabs, Users and Roles.

These correspond to the states admin.users and admin.roles, while admin is an abstract state whose URL is inherited by admin.users. This all works fine except when setting the active class using ui-sref-active.

There are two problems in this scenario:

1. The Administration nav element is not made active when on the Roles tab
2. When refreshing the page (be sure to pop out the Plunker preview) while on the Roles tab, no elements get the active class set

I would like to avoid using $state.includes directly since ui-sref-active is supposed to work on child states since 0.2.11: #927

Am I doing something wrong or is this a bug?

[stoykostanchev]

     <li ui-sref-active="active"><a ui-sref="admin.users">Administration Panel</a>

The active class 'ui-sref-active' activates upon is not the abstract 'admin', but the 'admin.users' :?
I guess the way this is suppose to be done is - making the admin non-abstract, and setting the url of the default child state to "" (however, THAT does not work for me for some reason, trying to figure out right now if it's me or an issue)
Switching to urls based navigation would work, but seems to me not to be the right intent

[blah238]

@stoykostanchev Making admin non-abstract fixes the first problem, but not the second, and unfortunately adds a new one: the users tab is made active when it's not. See plunker: http://plnkr.co/edit/swUNUcvBE1DaITgWSWtD?p=preview

I feel like this really should be working the way it is, and that it's not is a bug.

[blah238]

Well here's a workaround that fixes both issues for me: http://plnkr.co/edit/G5o6XkeCQfQId2XwUTXc?p=preview

This creates a flat object containing the the state names and their active status (true/false) into the root scope at startup, and updates it when $stateChangeSuccess fires.

I needed to do this instead of using $state.includes() directly because of issues with ui-bootstrap: angular-ui/bootstrap#1741 angular-ui/bootstrap#1539

If anyone has any better ideas I'm all ears. I wish these two libraries (ui-router and ui-bootstrap) integrated with each other better.

[blah238]

@timkindberg could you take a look at this since it looks like you did the PR for this? Thanks!

[SerhiiKozachenko]

+1

[dcolley]

+1 I can't get any classes to work in the partial/sidebar.html

[epelc]

+1 this would help alot

[adamalbrecht]

+1

I run into this issue a lot and, off the top of my head, here are a couple ideas for how it could be fixed:

First, you could add additional options to ui-sref-active so that you can specify a route rather than just using the route provided to ui-sref. Maybe something like this:

<a ui-sref='admin.users' ui-sref-active="{class: 'active', state: 'admin'}">Link</a>

Another way that might also be generally useful would be to allow linking to abstract states if it provides a default child state. Then you could do the following:

For example:

      // ...
      .state('admin', {
        url: '/admin',
        abstract: true,
        defaultChild: 'admin.users',
        templateUrl: 'templates/adminPanel.html'
      })
      .state('admin.users', {
        url: '',
        templateUrl: 'templates/adminUsers.html'
      })
      // ...

<a ui-sref="admin" ui-sref-active="active">Administration Panel</a>

[tagazok]

I just had the same problem.
In my app, I have an abstract 'users' state, and my menu link goes to users.list but then when selecting a user and going to users.details, I lost the ui-sref-active :/

I like the idea to have an object intp ui-sref-active to specify the associated state :)

[epelc]

@tagazok If your having the problem with a list/detail setup one way to get around it is to make your details state a child of your list state. This worked very well for me but it requires a little extra logic depending on if your details requires a second api call or if you already have the data from your list. You end up with users as an abstract state and users.list along with users.list.details so if you link to users.list then go to users.list.details you ui-sref-active will still work.

My problem is I have a settings state with multiple categories ie overview billing security teams states each with their own child states. So my above solution doesn't go very well with the above solution.

[SerhiiKozachenko]

@tagazok I have fixed this in my app by creating custom menu directive in which I have isActive func :

angular.module('Teach4Tech.Admin.Directives.Menu', [])
.directive('menu', [function(){
 return {
      restrict: 'A',
      template: '<li ng-repeat="item in menuItems" ng-class="{active: isActive(item.root)}"><a ui-sref="{{item.state}}"><span class="{{item.iconClass}}"></span>&nbsp;&nbsp;{{item.title}}</a></li>',
      controller: ['$scope', '$state', function ($scope, $state) {
        $scope.menuItems = [{
            title: 'Statistics',
              state: 'statistics',
              root: 'statistics',
            iconClass: 'glyphicon glyphicon-stats'
          }, {
              title: 'Videos',
                state: 'videos.list',
                root: 'videos',
            iconClass: 'glyphicon glyphicon-film'
          }, {
              title: 'Articles',
                state: 'articles',
                root: 'articles',
            iconClass: 'glyphicon glyphicon-pencil'
          }, {
              title: 'Courses',
                state: 'courses',
                root: 'courses',
            iconClass: 'glyphicon glyphicon-list-alt'
          }, {
              title: 'Messages',
                state: 'messages',
                root: 'messages',
            iconClass: 'glyphicon glyphicon-comment'
        }];

        $scope.isActive = function(root) {
          return $state.includes(root);
        };
      }]
    };
}]);

[tagazok]

thanks @Grievoushead this is exactly what I needed ! :)

[squadwuschel]

+1 Same Problem

[nealtovsen]

+1