javascript - 如何使用 ui-router 将子状态或孙状态设置为默认索引状态？

Question

我正在将 Angular 与 ui-router 一起使用。我想做的是当用户浏览到以下链接时:

/
/contacts
/contacts/:id

它们都默认显示与链接 /contacts/:id 相同的内容，默认为 :id，并且 url 保持不变(未更改为 /contacts/:id)。

ui-router wiki 上有一个关于此问题的常见问题解答，但它没有演示如何使用孙子甚至更深的后代状态进行初始化。

How to: Set up a default/index child state

我尝试了几种不同的状态设置，但没有效果。我做错了吗？这是示例页面:

ui-router-test

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>'
});