在ui路由器中設置默認的嵌套狀態

Question

我在ui路由器上有兩個級別的嵌套狀態，並且無法為某些視圖設置默認的嵌套狀態。

當狀態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的URL。 因此，第一步是給cars.detail.supply.list一個URL：

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

區分狀態網址后，您需要通過將汽車列表中繼器中的鏈接更新為來轉換到列表狀態

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

要么

通過在app.js指示從details狀態到詳細信息list狀態的重定向：

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