Why does ui-sref-active= not work when I use ui-router $state.transitionTo?

Question

I have the following in my code:

<a id="navigationQuestionLink"
   ui-sref="question.content({ content: 123 })"
   ui-sref-active="current">
</a>
<a id="navigationAdminLink"
   ui-sref="admin.content({ content: 'overview' })"
   ui-sref-active="current">
</a>

When I click on the links then the elements get a class of current.

However in my code when I do the following:

$state.transitionTo('question.content', { content: testId });

Then it transitions to the state correctly, the URL shows in the browser as http://127.0.0.1:17315/question/199 but the first link does not get the class of current. Here is my config that I am using:

var question = {
    name: 'question',
    url: '/question',
    views: {
        'root': {
            templateUrl: function (stateParams) {
                var a = 88;
                return '/Content/app/question/partials/questionHome.html';
            }
        }
    }
};
var questionContent = {
    name: 'question.content',
    parent: 'question',
    url: '/:content',
    views: {
        'root': {
            templateUrl: function (stateParams) {
                var a = 88;
                return '/Content/app/question/partials/questionHome.html';
            }
        }
    }
}

Can anyone give me advice on what I might be doing wrong. Everything works functionally except the first link does not get the class set to current when I use the ui-router $state.transitionTo.

Answer 1

The functionality you ask for - should be working, as shows this working plunker.

for these two states

  $stateProvider.state({
    name: 'question',
    url: '/question',
    views: {
    ...
  })
  $stateProvider.state({
    name: 'question.content',
    parent: 'question',
    url: '/:content',
    views : {
     ...
  })

There are these ui-sref:

<a ui-sref-active="current" ui-sref="question">question</a>
<a id="navigationQuestionLink"
   ui-sref="question.content({ content: 123 })"
   ui-sref-active="current">123</a>
<a id="navigationAdminLink"
   ui-sref="question.content({ content: 'overview' })"
   ui-sref-active="current">overview</a>
...
<a ui-sref-active="current" ui-sref="question.content({content: 'next'})">question next</a>
<a ui-sref-active="current" ui-sref="question.content({content: 'other'})">question other</a>

and these buttons will mark the above as expecte:

<button ng-click="go()">question</button>
<button ng-click="gotoContent(123)">question 123</button>
<button ng-click="gotoContent('overview')">question overview</button>
...
<button ng-click="gotoContent('next')">question next</button>
<button ng-click="gotoContent('other')">question other</button>

if these are the ng-click actions:

$scope.go = function() {
   $state.transitionTo('question');
};
$scope.gotoContent = function(content) {
   $state.transitionTo('question.content', { content: content });
};

Check this working example with the above in action...