Add ui-sref-active-includes attribute

[wcandillon]

fixes #1252

[christopherthielen]

I think the whole point of ui-sref-active is that you don't have to test for an explicit state name. I'm not sure I understand the scenario you laid out in #1252, can you plunk it? If you're trying to highlight a UI element when any state under app.users is active, including app.users.default and (for example) app.users.notdefault, then that's not what ui-sref-active is for.

[dougmoscrop]

@christopherthielen but that's precisely what lots of people go and do. you have a top navbar, with a bunch of links to states (foo.index, bar.index, baz.index) and then within those there's a lot of child states of foo, bar and baz (foo.details, bar.moreinfo, baz.blahblah) but they do not descend from the index state. and we want the links to the top states to show active because you're in that 'section' of the app.

how about ui-sref-active-parent as an alternative way of expressing this? it doesn't require the explicit route reference, but it will activate if the parent state of the ui-sref is active.

so as an example, given a ui-sref to foo.bar.baz.index,

the following states would not apply active:

• foo.*
• foo.bar.*

but any state that contains foo.bar.baz would, e.g. foo.bar.baz.index, foo.bar.baz.detail, foo.bar.baz.detail.more.lots.really.toomuch

[nateabele]

Also: https://radify.github.io/PR.js/#/angular-ui/ui-router/pulls/1254

[eddiemonge]

@wcandillon Can you clean up the PR please?

What about ui-sref-in-active

[christopherthielen]

I think this bug would be irrelevant if we had proper "redirect to default substate", yes?

<a ui-sref="app" ui-sref-active="active">Go to App Default Substate</a>

$stateProvider.state('app', { redirectTo: 'app.index' })
.state('app.index', { url: '/' })
.state('app.details', { url: '/:id'})

app.run(['$rootScope', '$state', function($rootScope, $state){
      $rootScope.$on('$stateChangeStart', function(event, toState) {
        var redirect = toState.redirectTo;
        if (redirect) {
          event.preventDefault();
          if(angular.isFunction(redirect))
              redirect.call($state);
          else
              $state.go(redirect);
        }
      });
    }]);

cc: @wcandillon @dougmoscrop @eddiemonge

[dougmoscrop]

Yes, assuming that 'app' is still a valid abstract state etc

On Sat, Jun 6, 2015, 2:40 PM Chris Thielen [email protected] wrote:

I think this bug would be irrelevant if we had proper "redirect to default
substate", yes?

Go to App Default Substate

$stateProvider.state('app', { redirectTo: 'app.index' })
.state('app.index', { url: '/' })
.state('app.details', { url: '/:id'})

app.run(['$rootScope', '$state', function($rootScope, $state){
$rootScope.$on('$stateChangeStart', function(event, toState) {
var redirect = toState.redirectTo;
if (redirect) {
event.preventDefault();
if(angular.isFunction(redirect))
redirect.call($state);
else
$state.go(redirect);
}
});
}]);

cc: @wcandillon https://github.com/wcandillon @dougmoscrop
https://github.com/dougmoscrop @eddiemonge
https://github.com/eddiemonge

—
Reply to this email directly or view it on GitHub
#1254 (comment)
.

[gercheq]

I totally agree with @dougmoscrop I always have an abstract state for each section of my app as I'm doing some work under the hood for each section. Unfortunately I can't link to an abstract state and linking to one of the substates does not trigger .active on the navigation item.

[christopherthielen]

For people searching and finding this issue:

1. We now have first class support for redirects which makes it easy to implement "default substates".

2. Although it doesn't seem to be generated in the docs properly, we have support for state name globs in ui-sref-active, e.g., ui-sref-active="{ 'active': 'admin.**' }"