如何使用ui-router將子狀態或孫狀態設置為默認索引狀態？

Question

我在ui路由器中使用angular。 我想做的是當用戶瀏覽到諸如以下的鏈接時：

/
/contacts
/contacts/:id

它們默認都顯示與鏈接/ contacts /：id相同的內容，帶有默認的：id，並且URL保持不變（不會更改為/ contacts /：id ）。

在ui-router Wiki上有一個關於此的常見問題解答，但它沒有演示如何與孫輩甚至更深的后代狀態進行初始化。

如何：設置默認/索引子狀態

我嘗試了幾種不同的狀態設置，均無濟於事。 我做錯了嗎？ 這是示例頁面：

ui路由器測試

Answer 1

用.when（）解決了這個問題。 樣本： ui-router-test 。

$urlRouterProvider
    .when('/', ['$state', function ($state) {
        $state.transitionTo('contacts.detail', {contactId: 1}, {location: false});
    }])
    .when('/contacts', ['$state', function ($state) {
        $state.transitionTo('contacts.detail', {contactId: 1}, {location: false});
    }])
    .otherwise('/');

$stateProvider
.state("home", {
    url: "/"
})
.state('contacts', {
    url: '/contacts',
    template: 'Contacts: <div ui-view></div>'
})
.state('contacts.detail', {
    url: '/:contactId',
    template: '<p class="lead">Contact ID is {{$stateParams.contactId}}</p>'
});