在ui-router

Question

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

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

我希望在没有点击supplies按钮的情况下显示List 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相关问题的解决方案
• 设置此https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state
中提到的url = ''

Answer 1

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

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

一旦状态网址可以区分，您需要通过更新车辆列表转发器中的链接转换到列表状态

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

或

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

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