在 ui-router 中设置默认嵌套状态

Question

我在 ui-router 上有两级嵌套状态，我无法为某些视图设置默认嵌套状态。

当状态 cars.detail 处于活动状态时，我需要加载状态 cars.detail.supply.list，而不更改当前 url。

我希望在不点击List supplies 按钮的情况下显示supplies 列表。

我错过了什么？

完整代码： https://plnkr.co/edit/DqwhaDXh3biMbq9PLCV3?p=preview

ui 状态：

.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: {
        'supplies@cars.detail': {
            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'
        }
    }    
})

视图：

<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>

---

我试过了：

• https://github.com/nonplus/angular-ui-router-default
• 为cars.detail.supply 设置抽象状态
• 许多 SO 相关问题的解决方案
• 设置url = '' 如此处所述https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state

Answer 1

为了让它工作，您必须区分cars.detail 和cars.detail.supply.list 的网址。所以，第一步是给cars.detail.supply.list一个url：

.state('cars.detail.supply.list', {
    parent: 'cars.detail.supply',
    url: '/list',
    templateUrl: 'cars.supply.list.html',
    controller: 'SupplyListController'
})

一旦可以区分状态 URL，您需要通过将汽车列表中继器中的链接更新为来转换到列表状态

ui-sref="cars.detail.supply.list(...)"

或

通过指示从details 状态到app.js 中详细信息的list 状态的重定向：

$urlRouterProvider.when('/dashboard/cars/edit/{id}', '/dashboard/cars/edit/{id}/list');