I am facing an issue with two level nested states on ui-router where I cannot set a default nested state for a specific view.
The challenge is to load the state cars.detail.supply.list when the state cars.detail is active without changing the current URL.
The desired outcome is to display the list of supplies without having to click on the List supplies button.
What could be causing this problem?
Complete Code: https://plnkr.co/edit/DqwhaDXh3biMbq9PLCV3?p=preview
ui-states:
.state('cars.detail', {
parent: 'cars',
url: '/edit/:id',
views: {
'content@index': {
templateUrl: 'cars.detail.html',
controller: 'CarDetailController'
},
'supplies': {
templateUrl: 'cars.supply.html',
controller: 'CarDetailController'
}
}
})
.state('cars.detail.supply', {
url: '',
parent: 'cars.detail',
abstract: true,
//'default': '.list',
views: {
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1d1b1e1e02070b1d2e0d0f1c1d400a0b1a0f0702">[email protected]</a>': {
templateUrl: 'cars.supply.html',
//controller: 'SupplyListController'
}
}
})
.state('cars.detail.supply.list', {
parent: 'cars.detail.supply',
url: '',
views: {
'@cars.detail.supply': {
templateUrl: 'cars.supply.list.html',
controller: 'SupplyListController'
}
}
})
.state('cars.detail.supply.add', {
parent: 'cars.detail.supply',
url: '/add-supply',
views: {
'@cars.detail.supply': {
templateUrl: 'cars.supply.add.html',
controller: 'AddSupplyController'
}
}
})
The view:
<div>
...
<h4 ng-if="car.id">
Supplies
<a class="btn btn-default btn-sm pull-right" ui-sref="cars.detail.supply.add({ carId: car.id })">
<i class="glyphicon glyphicon-plus"></i> Add supply
</a>
<a class="btn btn-default btn-sm pull-right" ui-sref="cars.detail.supply.list({ carId: car.id })">
<i class="glyphicon glyphicon-plus"></i> List supplies
</a>
</h4>
<div ui-view="supplies" class="">
</div>
</div>
Approaches attempted:
- https://github.com/nonplus/angular-ui-router-default
- Setting an abstract state for
cars.detail.supply - Tried solutions from various Stack Overflow questions
- Using
url = ''as suggested here: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state