In my music app, I have an ng-repeat on the top-level states of my app to create navigation links. One of the top-level states, called library, is abstract and has child states (which are navigable using tabs). Since I am using an ng-repeat, the abstract state has a directive of ui-sref="library"
. However, it's not possible to navigate to an abstract parent state like that, instead I would need to write ui-sref="library.albums"
. I am unable to do this because of the ng-repeat data coming directly from the state provider. How can I set a default child state on "library" so that whenever that state is visited, it redirects to the child?
Unfortunately you can't use ui-sref
to link to an abstract state.
you could try something like:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
if(toState.name == 'library'){
event.preventDefault();
$state.go('library.albums', toParams);
}
}
Rather than hardcoding each state redirection though, you could do something like:
$stateProvider
.state('library', {
url: '/library',
data: {
redirect: 'library.albums'
}
})
.state('library.albums', {
url: '/albums',
data: {
redirect: false
}
});
$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
if(toState.data && toState.data.redirect){
event.preventDefault();
$state.go(toState.data.redirect, toParams);
}
}