Vaibhav Pachauri Vaibhav Pachauri - 10 days ago 6
AngularJS Question

Redirect to a particular child state whenever a particular parent state is found in Angular UI

I want to redirect from a parent state to a particular child state all the time. Please refer below :

$stateProvider.state('dashboard.view-bills', {
url: '/individual/view-bills',
templateUrl: 'modules/view-bill-module/partial/current-invoices/current-invoices.html',
ncyBreadcrumb: {
label: ' View Bills'
}
});

$stateProvider.state('dashboard.view-bills.current-invoices', {
url: '/current-invoices',
templateUrl: 'modules/view-bill-module/partial/current-invoices/current-invoices.html',
ncyBreadcrumb: {
label: ' Current Invoices'
}
});

$stateProvider.state('dashboard.view-bills.history-invoices', {
url: '/invoices',
templateUrl: 'modules/view-bill-module/partial/history-invoices/history-invoices.html',
ncyBreadcrumb: {
label: ' Invoice History'
}
});


Here, I want to go the 'dashboard.view-bills.current-invoices' state whenever I am in
dashboard.view-bills
state. I am using angular-breadcrumb from breadcrumbs.

I have used the following code to change the URL :
$urlRouterProvider.when('/individual/view-bills' , '/individual/view-bills/current-invoices');


But with this code, the state doesn't change, What is the best way of doing this ? And also, is there any function like :
$stateRouterProvider.when('matcher-state' , 'destination-state');

Answer

Keep the line $urlRouterProvider.when('/individual/view-bills' , '/individual/view-bills/current-invoices'), you have done half of the job.

What are you missing is the abstract: true in state dashboard.view-bills to make the state change.

Source : https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state

Thanks for using angular-breadcrumb, btw ;)

Comments